时间戳

首页 > 解决方案 > 在本机反应中显示内联文本

react-native - 在本机反应中显示内联文本

问题描述

有什么办法可以在图片中显示这样的文字吗？

在此处输入图像描述

这是我当前的代码：

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView scrollEnabled={true}>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                </View>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
  badge: { 
    backgroundColor: '#f16622',
    color: '#fff',
    padding: 5, 
    marginRight: 5, 
    alignSelf: 'flex-start', 
    borderRadius: 4 
  }
});

但是我的代码无法像我想要的图片那样显示。它没有全部显示，而是变成了这样：

在此处输入图像描述

标签： react-nativetexttags

解决方案

您需要将子元素包装在View. 使用 flexbox，你有flexWrap属性，它定义了 flex 项目是强制在一行中还是可以被包裹。默认情况下，它设置为 nowrap。将其设置为换行：更改<View style={{ flexDirection: 'row' }}>为<View style={styles.badgeContainer}>

    <View style={styles.badgeContainer}>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
    </View>

并尝试将以下样式应用于徽章容器View。

badgeContainer:{
  flex:1,
  flexDirection: 'row',
  flexWrap: 'wrap'
}

推荐阅读