如何在 ParallaxImage 上放置文本答案

【问题标题】：How to put text on the ParallaxImage如何在 ParallaxImage 上放置文本
【发布时间】：2019-08-04 12:51:59
【问题描述】：

我正在使用react-native-snap-carousel。

如何在图片上显示文字？

        <View style={styles.item}>
          <ParallaxImage
            source={{ uri: item.illustration }}
            containerStyle={styles.imageContainer}
            style={styles.image}
            parallaxFactor={0.35}
            {...parallaxProps}
          />
        </View>
        <View style={styles.textContainer}>
          <Text styke={styles.title}>{item.title}</Text>
          <Text style={styles.subtitle}>{item.subtitle}</Text>
        </View>

样式：

const styles = StyleSheet.create({
  item: {
    width: screenWidth - 60,
    height: screenWidth - 250
  },
  imageContainer: {
    flex: 1,
    marginBottom: Platform.select({ ios: 0, android: 1 }), // Prevent a random Android rendering issue
    backgroundColor: 'white',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5
  },
  image: {
    ...StyleSheet.absoluteFillObject,
    resizeMode: 'cover'
  },
  textContainer: {
    justifyContent: 'center',
    paddingTop: 20 - 8,
    paddingBottom: 20,
    paddingHorizontal: 16,
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    backgroundColor: colors.gray3
  },
  title: {
    color: colors.black,
    fontSize: 13,
    fontWeight: 'bold',
    letterSpacing: 0.5
  },
  subtitle: {
    marginTop: 6,
    color: colors.gray,
    fontSize: 12,
    fontStyle: 'italic'
  }
});

【问题讨论】：

标签： react-native react-native-snap-carousel

【解决方案1】：

添加一个值的底部，例如

 return (
      <View style={styles.item}>
        <ParallaxImage
          source={item.thumbnail}
          containerStyle={styles.imageContainer}
          style={styles.image}
          parallaxFactor={0.4}
          {...parallaxProps}
        />
        <View style={{bottom: 40}}>
        <Text style={{color:'white', fontSize: scale(20), }}>
          {item.title}
        </Text>
        </View>

      </View>

【讨论】：

【解决方案2】：

你能试试这个吗？

        <View style={styles.item}>
          <ParallaxImage
            source={{ uri: item.illustration }}
            containerStyle={styles.imageContainer}
            style={styles.image}
            parallaxFactor={0.35}
            {...parallaxProps}
          />
          <Text styke={styles.title}>{item.title}</Text>
          <Text style={styles.subtitle}>{item.subtitle}</Text>
        </View>
....
            <Carousel
                ...
                itemWidth={screenWidth - 60}
            />
...
 item: {
    width: screenWidth - 60,
    height: screenWidth - 60
  }

【讨论】：