Question

所以我是新来的本地人。我试图在主屏幕上放置一些按钮。假设我有6个按钮，则需要将其放置在主屏幕下半部分的网格中。像这样：

[ a ]  [ b ]
[ c ]  [ d ] 
[ e ]  [ f ]

我知道我们将在其中使用Flex，到目前为止，我已经成功地在行中放置了两个按钮。以下是我的代码。（我只发布相关代码）

<View style = { styles.allButtons }>
                        <View style = { styles.homeButtons }  > 
                            <Button style = { styles.buttonText }
                                color = "#157fd3"           
                                title = 'Button 1'
                                onPress = {() => { Alert.alert("Pressed"); }}
                            />
                        </View>
                        <View style = { styles.homeButtons }  > 
                            <Button style = { styles.buttonText }
                                color = "#157fd3"           
                                title = 'My feeds'
                                onPress = {() => { Alert.alert("to be Updated."); }}
                            />
                        </View>
                    </View>

我的样式表看起来像这样。

allButtons: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        margin: 5,

    },
    homeButtons: {
        flex: 1,
        borderWidth: 0.5,
        borderColor: 'white',
        alignItems: 'center',
        height: 45,
        width: 260,
        marginBottom: 3,
    },
    buttonText: {
        fontSize: 18,
    },

这将连续产生2个按钮。但是，如果我添加另一个按钮，它将被放置在同一行，即该行中的3个按钮。需要帮助。

Answer 1

尝试将flex-wrap: wrap;添加到您的allButtons样式

您可能还需要给homeButtons容器一个flex-basis: 50%。请注意，因为flex-basis没有考虑利润。

如何在react native中将按钮放置在特定网格中？

1 个答案: