javascript - 在 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
    }
});

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

这是我在 React Native 中得到的:



也许有一些我不熟悉的扁平化行为？

Answer 1

首先，当您在 React Native 中设置样式时，一切都已经处于 flex 状态，因此您不必做 display : flex
如果要连续渲染 7 个具有相同宽度的按钮，请确保它们都具有相同的父级。然后使用 flex:1在他们每一个人。

当你这样做时会发生什么flex:1当你在 flex 前面放一个数字时在这种特殊情况下，您的风格会将您的 parent 分成许多部分并将其交给 child 。

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

请随时要求更清楚上述内容。