在 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

我遇到了同样的问题，我为每个按钮添加了视图组件盖，如下代码所示：

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

Answer 2

首先，当你在 React Native 中设计样式时，一切都已经在 Flex 中，所以你不必这样做display : flex

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

flex:1在这种特殊情况下，当您在样式前面放置一个数字时，会发生什么flex，它将您的父母分为许多部分并将其交给孩子。

所以所有按钮的宽度都是 1/7。如果您放入flex:2其中一种样式，则该按钮将具有 2/7 的宽度，其余按钮将具有 1/7 的宽度。

请随时询问有关上述内容的更多信息。

Answer 3

您是否尝试过添加flex: 1到列表中以使其占据整个水平空间？