在React Native

Question

我想在一行中渲染7个按钮，宽度相等，以水平填充所有可用空间。

render() {
    return (
        <FlatList
            data={this.state.days}
            renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
            keyExtractor={item => item.getDate().toString()}
            horizontal={true}
            style={styles.list}
        />
    );
}

const styles = StyleSheet.create({
    list: {
        display: 'flex'
    },
    button: {
        flex: 1
    }
});

它们位于一个平面列表中，包含在视图中，因为我无法直接设置按钮样式。 在HTML页面的常规flexbox中，这种方法很有效。

这是我在React Native中获得的：

也许有一些我不熟悉的平面列表行为？

Answer 1

首先，当您使用本机设置样式时，所有内容都已处于弹性模式中，因此您不必执行display : flex

如果要在一行中渲染具有相同宽度的7个按钮，请确保所有这些按钮具有相同的父级。然后在每一个中使用flex:1。

当你在这种特殊情况下在你的风格中放置一个数字flex:1时，你flex发生了什么事情，它将你的父母分成很多部分并交给孩子。< / p>

所以你的所有按钮都有1/7的宽度。如果你将flex:2放在其中一个样式中，那么该按钮将具有宽度的2/7，其余的将具有1/7。

请随意要求上述说明更清晰。

Answer 2

您是否尝试将flex: 1添加到列表中以便占用整个水平空间？

Answer 3

在我看来，尝试在样式对象列表中添加justifyContent space-between

Answer 4

在每个项目中设置以下样式：

width:width/7

Answer 5

我遇到了同样的问题，我为每个Button添加了View组件封面，如下代码：

 <View style={{flexDirection:"row"}}>
        <View  style={{flex:1}}>
            <Button title="Add"  />
        </View>
        <View  style={{flex:1}}>
            <Button title="Clear"  />
        </View>
        ....
   </View>