3

我想以相同的宽度连续渲染 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 中得到的：

在此处输入图像描述

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

4

5 回答 5

3

首先，当您在 react native 中进行样式设置时，一切都已经在 flex 中，因此您不必这样做display : flex

如果要连续渲染 7 个具有相同宽度的按钮，请确保它们都具有相同的父级。然后flex:1在每一个中使用。

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

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

请随时要求对上述内容进行更清楚的说明。

于 2018-03-22T19:14:09.110 回答
2

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

<View style={{flexDirection:"row"}}>
    <View  style={{flex:1}}>
        <Button title="Add"  />
    </View>
    <View  style={{flex:1}}>
        <Button title="Clear"  />
    </View>
    //....
</View>
于 2019-08-15T14:54:44.317 回答
0

在每个项目中，设置此样式：

width:width/7
于 2018-08-23T15:30:35.070 回答
0

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

于 2018-03-22T17:53:38.790 回答
0

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

于 2018-03-22T19:05:18.803 回答