反应原生儿童视图 justifyContent 属性不起作用

Question

我正在尝试使用 expo 在 react native 中对齐项目，但是在对齐父视图中的项目后，子视图 justifyContent 无法正常工作。例如：

<View>
  <View style={{ borderBottomColor: 'black',borderBottomWidth: 3}}>
    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
      <Text style={{ color: "#6B35E2"}}>Name</Text>
      <Text style={{ fontWeight: 'bold',color: "#6B35E2"}}>Nico</Text>
    </View>
   </View>
   <View style={{alignSelf:'flex-end'}}>
    <Icon
      name="fingerprint"
      iconStyle={styles.iconRight}
    />
  </View>
</View>

渲染following image。该图标出现在底部边框下方，我需要它位于第二个文本的右侧。重要的是要注意底部边框不能到达图标。它必须在第二个文本结束。因此，我尝试将flexDirection:row 应用于父视图，如下所示：

<View style={{flexDirection: "row"}}>
  <View style={{ borderBottomColor: 'black',borderBottomWidth: 3}}>
    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
      <Text style={{ color: "#6B35E2"}}>Name</Text>
      <Text style={{ fontWeight: 'bold',color: "#6B35E2"}}>Nico</Text>
    </View>
  </View>
  <View style={{alignSelf:'flex-end'}}>
    <Icon
      name="fingerprint"
      iconStyle={styles.iconRight}
    />
  </View>
</View>

很遗憾，it does not render correctly。图标如预期一样位于右侧，底部边框刚刚结束，但应用于子 View 的 justifyContent:space-between 属性不再起作用。有任何想法吗？这是带有expected result 的图像。重要的是底部边框不能在图标下方，它必须在之前结束。

Answer 1

如果您希望icon 位于Name 和Nico 的同一行，则需要将Icon 组件放在Name 和Nico 的同一行内。

<View style={{flexDirection: "row"}}>
  <View style={styles.futBorder}>
    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
      <Text style={styles.placeholderText}>Name</Text>
      <Text style={styles.dataText}>Nico</Text>
      <View style={{alignSelf:'flex-end'}}>
        <Icon
          name="fingerprint"
          iconStyle={styles.iconRight}
        />
      </View>
    </View>
  </View>
</View>

这样会将 Nico 放在行的中间。您也可以像这样在一行中创建 2 行：

<View style={{flexDirection:'row',justifyContent:'space-between'}}> {/* parent row */}
  <View style={{flexDirection: 'row'}}> {/* child row */}
      <Text style={styles.placeholderText}>Name</Text>
      <Text style={styles.dataText}>Nico</Text>
  </View>
  <View style={{alignSelf:'flex-end'}}>
    <Icon
      name="fingerprint"
      iconStyle={styles.iconRight}
    />
  </View>
</View>

然后如果需要你可以调整宽度

Answer 2

这个想法是有一个parent 视图和flexDirection 的row。然后在父视图内部会有两个视图-

1.) 使用flex: 1、flexDirection : 'row' 和justifyContent: 'space-between' 的第一个视图

2.) Second View 没有任何样式，只是一个简单的视图。

我为此创建了一个Snack。

你可以这样做

<View style={styles.parentView}>
  <View style={styles.firstRowView}>
    <Text>Name</Text>
    <Text>Nico</Text>
  </View>

  <View style={styles.secondRow}>
    <Ionicons name="finger-print" size={24} color="black" />
  </View>
</View>

样式将是

parentView: {
  flexDirection: 'row',
},
firstRowView: {
  flex: 1,
  flexDirection: 'row',
  justifyContent: 'space-between',
  borderBottomColor: 'black',
  borderBottomWidth: 2,
},
secondRow: {},