reactjs - 如何显示一排按钮

Question

我正在尝试设置按钮样式，以便它们连续显示。使用下面的代码，按钮出现在一列中。如何实现下图所示的样式？我想使用 Flex

renderRadioButton = () => {
    return (
        <View
            style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                padding: 0,
                margin: 0,
                listStyle: 'none',
                display: 'flex',
            }}
        >
            <View
                style={{
                    flexDirection: 'row',
                    flexWrap: 'wrap',
                }}
            >
                <Text
                    style={{
                        color: Colors.black,
                        borderWidth: 1,
                        borderColor: 'black',
                        borderStyle: 'solid',
                        backgroundColor: Colors.green,
                        width: 50,
                        height: 50,
                        fontSize: 6,
                        textAlign: 'center',
                        padding: 10,
                        margin: 10,
                        marginBottom: 50,
    
                    }}
                >
                    TEST
                </Text>
            </View>
        </View>
    )
}

标签： reactjsreact-native

Answer 1

你想要这样的东西吗？：

<View
    style={{
      flexDirection: "row",
      padding: 0,
      margin: 0,
      justifyContent: "center",
      alignItems: "center"
    }}
  >
    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10              
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10,             
          
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10,
          
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10,
         
        }}
      >
        TEST
      </Text>
    </View>

    <View>
      <Text
        style={{
          color: "black",
          borderWidth: 1,
          borderColor: "black",
          borderStyle: "solid",
          backgroundColor: "green",
          width: 50,
          height: 50,
          fontSize: 6,
          textAlign: "center",
          padding: 10
        }}
      >
        TEST
      </Text>
    </View>
  </View>

沙盒上的代码