在父级边界的视图中显示包裹在 TouchableOpacity 选项下方的行

Question

我在 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 的样子，但是红线就在灰色框的边缘，包围了所有三个选项。

如何实现？

Answer 1

将 <Text> 包裹在一个 <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：我认为即使没有 <View> 的 height: 46 它也应该可以工作，但我现在无法测试它所以不能保证。

在父级边界的视图中显示包裹在 TouchableOpacity 选项下方的行

Displaying line bellow TouchableOpacity options wrapped in a View at the border of parent

javascript

css

react-native

react-native-stylesheet