在文本中添加内联ImageBackground（文本组件中的图像）-React-native。

Question

我想用 ImageBackground 里面 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',
  },
});

安卓系统给出了这个错误。

IOS有这样的显示。

你可以看到图片不在文本的最后，再加上通常图片里面有一个数字，我们得到一个占位符，但我认为这在最新版本中已经解决了，因为我看到了一个关于它的问题。

react-native: 0.60.6

谢谢

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,
  },

Salam m B. Mohammad

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