Question

我必须创建一个ListView，其中包含左侧的Icon和两个文本元素，如下所示：

但我得到的是：

如何实现这个目标？

这是我的行的渲染方法：

        return (
            <TouchableHighlight underlayColor='#dddddd'>
                <View style={styles.container}>
                    <Icon
                                name='fontawesome|phone'
                                size={30}
                                color='gray'
                                style={styles.contactIcon}
                                />

                        <Text style={styles.headline}>Anrufen</Text>
                        <Text style={styles.details}>{item.text}</Text>
                    <View style={styles.separator}/>
                </View>
            </TouchableHighlight>
        );

这些是我的风格：

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    padding: 15,
},

details: {
    fontSize: 14,
    marginBottom: 8
},
headline: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
    flex: 1
},

我尝试为每个文本元素使用宽度语句，使其尽可能宽，没有任何帮助。

Answer 1

您必须将两个文本节点包装在父文本节点中，并给出样式“flex = 1”：

检查一下：

<View style={{ flex: 1 }} >
   <Text style={styles.headline}>Anrufen</Text>
   <Text style={styles.details}>{item.text}</Text>
</View>

Answer 2

作为替代解决方案，您可以使用视图包围两个文本元素，然后将其flex方向设置为列

<View style={{flex: 1, flexDirection: 'column'}}>
  <Text style={styles.headline}>Anrufen</Text>
  <Text style={styles.details}>{item.text}</Text>
</View>

ReactNative：如何将Text-Elements定位在另一个之下

2 个答案: