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

Posted 2023-02-16

【中文标题】反应原生儿童视图 justifyContent 属性不起作用

【英文标题】：react native children view justifyContent property not working

【发布时间】：2022-01-09 11:51:39

【问题描述】：

我正在尝试使用 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 的图像。重要的是底部边框不能在图标下方，它必须在之前结束。

【问题讨论】：

发布预期结果的图像/屏幕截图。

已在帖子中添加！

【参考方案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>

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

【讨论】：

很抱歉，但遗憾的是您的回答并没有达到预期的效果。第一个渲染屏幕左侧的所有内容，第二个渲染压缩在一起的两个文本标签。

@NICOLÁSANTONIOPINOLEVA 就像我在最后所说的那样，“如有必要，您可以调整宽度”。使用检查查看您的元素大小，如果您使用的是 chrome，只需按 ctrl + shift + c 然后将鼠标移过

是的，但这意味着我每次想使用该视图时都必须手动调整。

【参考方案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: ,

【讨论】：

就是这样！非常感谢

乐于助人。如果答案解决了您的问题，请考虑接受并投票。