javascript 在React Native中渲染等宽按钮

5q4ezhmt 于 2023-11-15 发布在 Java

关注(0)|答案(6)|浏览(109)

我想呈现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
    }
});

字符串
它们在一个平面列表中， Package 在一个视图中，因为我不能直接对按钮进行样式化。
这是我在React Native中得到的：

的数据
也许有一些我不熟悉的平淡行为？

JavaScript

来源：https://stackoverflow.com/questions/49435229/rendering-equal-width-buttons-in-react-native

6条答案

按热度按时间

uqdfh47h1#

我得到了同样的问题，我已经添加了视图组件封面为每个按钮像下面的代码：

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

字符串

赞(0）回复(0）举报 2023-11-15

eaf3rand2#

首先，当你在react native中设计样式时，所有的东西都已经在flex中了，所以你不必再做display : flex了。
如果你想在一行中呈现7个相同宽度的按钮，确保它们都有相同的父级，然后在每一个中使用flex:1。
当你做flex:1时会发生什么，当你在样式中，在flex前面放一个数字时，在这种特定的情况下，它把你的父对象分成许多部分，然后给予给子对象。
所以你所有的按钮都有1/7的宽度。如果你把flex:2放在其中一个样式中，那么这个按钮的宽度将是2/7，其余的将是1/7。
请随时要求对上述内容进行更详细的说明。