0

我在 React Native 中有一个类似组件的菜单，它被包装在一个视图中。此视图有 3 个选项。我希望每个选项在其下方都有一条线，几乎触及视图的边界。

为了实现这一点，我有三个带有文本和视图的 TouchableOpacities，它们都包装在同一个父级下。这就是我的代码的样子：

export function Menu () {
  return (
    <View style={{
      flex: 1,
      flexDirection: 'row',
      backgroundColor: 'grey',
      height: 50,
      justifyContent: 'space-around',
      alignContent: 'center',
      alignItems: 'center'
    }}>
      <TouchableOpacity>
        <Text>Option 1</Text>
        <View
          style={{
            width: 50,
            height: 4,
            backgroundColor: 'red',
            paddingTop: 0,
            marginTop: 25,
            marginBottom: 0
          }}
        />
      </TouchableOpacity>
      <TouchableOpacity> <Text>Option 2</Text> </TouchableOpacity>
      <TouchableOpacity> <Text>Option 3</Text> </TouchableOpacity>
    </View>
  )
}

这里的问题是，通过将内部视图放置在底部marginTop: 25，我将文本推到其父级的顶部，这是我不想要的。这是这段代码的结果：

在此处输入图像描述

看看选项 2 和选项 3 如何在它们的父项中居中？这正是我希望选项 1 的样子，但红线位于灰色框的边缘，包含所有三个选项。

如何做到这一点？

4

1 回答 1

2

包裹<Text>里面 aa <View>。自从我上次从事 RN 工作以来已经有一段时间了，但我认为这段代码应该会给你想要的结果。

<TouchableOpacity>
  <View style={{flex: 1, alignItems: 'center', height: 46}}><Text>Option 1</Text></View>
  <View
      style={{
        width: 50,
        height: 4,
        backgroundColor: 'red',
        paddingTop: 0,
        marginTop: 25,
        marginBottom: 0
      }}
    />
</TouchableOpacity>

PS：我认为即使没有height: 46for the它也应该可以工作，<View>但我目前无法对其进行测试，因此无法保证。

于 2019-10-01T16:34:02.917 回答