反应原生元素列表宽度太窄答案

【问题标题】：React native elements list width is too narrow反应原生元素列表宽度太窄
【发布时间】：2018-04-30 01:12:03
【问题描述】：

我在这里使用 react-native-elements 列表：https://react-native-training.github.io/react-native-elements/API/lists/

当我用flex: 1 渲染它时，它非常窄。当我使用width: 400 渲染它时，就可以了。

以下是样式：

container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    half: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderWidth: 2,
        borderColor: '#FF0000'
    },

这是列表代码：

     <View style={styles.container}>
        { babyList.length === 0 ? null :
            <View style={styles.half}>
                <List containerStyle={{flex: 1}}>
                    <Text style={styles.welcome}>
                        Select Baby
                    </Text>
                    {babyList.map((baby, id) => {
                        return <ListItem key={"bbbtn" + id}
                                         onPress={ (event) => selectBaby(baby) } title={"Baby: " + baby.name}/>
                    })}
                </List>
            </View>
        }
      </View>

上面的代码如下所示：

如果我设置containerStyle={{width: 400}}，这就是它的样子

我认为 flex: 1 会使其成为最大宽度？我需要做什么才能让它占据整个父容器？

【问题讨论】：

标签： reactjs react-native flexbox react-native-flexbox

【解决方案1】：

这是因为您用alignItems: 'center' 覆盖了默认的alignItems: 'stretch'。从样式表中删除它，所有元素都将被拉伸以填充所有可用空间。

这是您在 Snack 上的代码：https://snack.expo.io/r121RGj1G

【讨论】：