Question

我正在学习react-native，而flexbox的布局似乎不一致。在我下面想要做的所有代码片段中，在屏幕中间有一个分隔线，但它始终与左侧对齐：

<View style={styles.row}>
            <View
              style={{
                flex: 0.8,
                justifyContent:'center',
                borderColor: '#1abc9c',
                borderWidth: 1
              }}
            />
          </View>
</View>

let styles = StyleSheet.create({
row: {
    flexDirection: 'row',
    marginHorizontal: 6,
    marginVertical: 6,
  },
});

有人可以让我知道我在做什么错吗？

Answer 1

尝试一下：

<View
    style={{
      flex: 1, // << look at this // Occupy the entire container
      flexDirection: "row",
      marginHorizontal: 6,
      marginVertical: 6,
      justifyContent: "center" // center the children horizontally - 
                               //since flexDirection: 'row'
   }}
  >
    <View
      style={{
        flex: 0.5,
        justifyContent: "center",
        borderColor: "#1abc9c",
        borderWidth: 1
      }}
    />
  </View>

为什么内容未在React Native中显示在中心

1 个答案: