react-native - 将内联 ImageBackground 添​​加到文本（文本组件内的图像）-React-native

Question

我正在尝试使用ImageBackgroundinside Text，其中ImageBackground也有一个文本。这是我的代码：

return (
    <View style={styles.container}>
      <Text style={styles.verseText}>
        {props.verseText}
        <ImageBackground
          source={require('Resources/verseNumber.png')}
          resizeMode="contain"
          style={styles.verseNumber}
          imageStyle={styles.verseImage}>
          <Text>{props.verseNumber}</Text>
        </ImageBackground>
      </Text>
    </View>
  );
};

export default QuranVerseComponent;

const styles = StyleSheet.create({
  container: {
    height: height * 0.25,
    flexDirection: 'row-reverse',
    flexWrap: 'wrap',
    padding: 20,
    // justifyContent: 'flex-end',
    alignItems: 'center',
    alignContent: 'center',
    backgroundColor: '#fff',
    borderBottomWidth: 3,
  },
  verseNumber: {
    height: 30,
    width: 30,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
  verseImage: {
    tintColor: '#c48323',
  },
  verseText: {
    fontSize: commonStyle.FONT_SIZE_H1,
    fontWeight: 'bold',
    writingDirection: 'rtl',
  },
});

Android给出了这个错误：

IOS有这个显示：

您可以看到图像不在文本末尾加上通常图像内有一个数字，我们得到一个占位符，但我认为这在最新版本中已解决，因为看到了一个关于它的问题。

反应原生：0.60.6

谢谢

标签： react-native

Answer 1

 render() {

    return (
      <View style={styles.container}>
        <Image
          source={assets.splashBg}
          style={styles.splash}
          resizeMode="stretch"
        />
        <Image source={assets.splashLogo} style={styles.splashBg} />
        <View style={styles.footerView}>
          <Text style={[styles.splashFooter]}>copyright text here</Text>
          <Text style={[styles.splashFooter, styles.b30]}>
            Your text here
          </Text>
        </View>
      </View>
    );
  }
}

   

container: {
    flex: 1,
    alignContent: 'center',
  },
  splash: {
    width,
    height,
    position: 'absolute',
  },
  splashBg: {
    alignSelf: 'center',
    marginTop: -120,
    width: '110%',
    height: height,
  },
  footerView: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  splashFooter: {
    color: '#fff',
    textAlign: 'center',
    fontStyle: 'normal',
    fontSize: 14,
    lineHeight: 17,
    position: 'absolute',
    bottom: 50,
  },
 b30: {
    bottom: 30,
  },

萨拉姆·B·穆罕默德

你不能直接在里面添加文字你必须像这样在里面使用