Javascript 我如何在抽屉中放置文本下方灰色的导航线？

我想做一些类似的事情，我唯一需要知道的是如何使灰色线出现在每个组件下。 顺便说一下，我正在使用react导航。 这就是我想要重建的，我只需要知道如何制作中间灰线。

我的鳕鱼：

    const DrawerNavigator = createDrawerNavigator({
    Example: ScreenExample
},
{
    contentComponent: CustomDrawerContentComponent,
    drawerWidth: width * 0.63,
    contentOptions: {
      activeTintColor: blue,
      inactiveTintColor: "rgb(105,105,104)",
      itemsContainerStyle: {
        textAlign: "center"
      },
      labelStyle: {
        fontFamily: "RobotoCondensed-Regular",
        fontWeight: "400",
        fontSize: 17,
        marginLeft: -5
      }
    },
    iconContainerStyle: {
      opacity: 1
    }
  }

const CustomDrawerContentComponent = props => (
  <SafeAreaView
    style={{ flex: 1, backgroundColor: white }}
    forceInset={{ top: "never" }}
  >
    <SafeAreaView style={{ flex: 0, backgroundColor: "rgb(63,103,149)" }} />
    <View
      style={{
        alignItems: "center",
        backgroundColor: "rgb(63,103,149)",
        shadowOpacity: 0.3,
        shadowOffset: {
          height: 5
        }
      }}
    >
      <Image
        source={require("./src/assets/Icon-Transparente.png")}
        style={{ height: 150, width: 150 }}
        resizeMode="contain"
      />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
</View>
  </SafeAreaView>

const-DrawerNavigator=createDrawerNavigator({
示例：屏幕示例
},
{
contentComponent:CustomDrawerContentComponent，
抽屉宽度：宽度*0.63，
内容选项：{
颜色：蓝色，
颜色：“rgb（105105104）”，
itemsContainerStyle：{
textAlign：“居中”
},
标签样式：{
fontFamily：“机器人”，
fontWeight:“400”，
尺寸：17，
边缘左侧：-5
}
},
iconContainerStyle：{
不透明度：1
}
}
const CustomDrawerContentComponent=props=>(

只需创建一个这样的通用组件

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
export default class UnderlinedComponent extends React.Component {
  render() {
    return (
      <View style={{ borderWidth: 1, borderBottomColor: 'grey' }}>
        {this.props.children}
      </View>
    );
  }
}

<UnderlinedComponent> 
   <Text></Text>
</UnderlinedComponent >
<UnderlinedComponent> 
   <Button></Button>
</UnderlinedComponent >

import*as React from'React'；
从“react native”导入{View，StyleSheet}；
导出默认类UnderlinedComponent扩展React.Component{
render（）{
返回(
{this.props.children}
);
}
}

像这样使用它

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
export default class UnderlinedComponent extends React.Component {
  render() {
    return (
      <View style={{ borderWidth: 1, borderBottomColor: 'grey' }}>
        {this.props.children}
      </View>
    );
  }
}

<UnderlinedComponent> 
   <Text></Text>
</UnderlinedComponent >
<UnderlinedComponent> 
   <Button></Button>
</UnderlinedComponent >

这将只是创建一个底部边框，您可以根据需要自定义它

---

如果你不知道如何在抽屉中使用

contentComponent

，只要我就在https://reactnavigation.org/docs/en/drawer navigator.html#contentoptions for draweritems上找到了我想要的答案 我发现抽屉里有一个名为itemStyle的属性，使用方法如下 项目样式：{ 边框底部宽度：0.5， 颜色：灰色       }

---

通过将其添加到内容选项中，我可以在项目下方创建行：）

谢谢您的回答，但我有一个问题。这是我的代码，我不知道如何重新创建您的建议