[英]How can I put in my drawer echo with react-navigation lines in gray below the text?
I would like to do something like this, the only thing I need to know is how to make the gray lines that appear under each component.我想做这样的事情,我唯一需要知道的是如何制作出现在每个组件下的灰线。 By the way I'm using react-navigation.
顺便说一下,我正在使用反应导航。 this is what I want to recreate, I just need to know how to make the intermediate gray line.
这就是我想要重新创建的,我只需要知道如何制作中间灰线。 Link the Image
链接图像
My cod:我的鳕鱼:
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>
Just create one common component like this,只需创建一个像这样的通用组件,
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>
);
}
}
and use it like this,并像这样使用它,
<UnderlinedComponent>
<Text></Text>
</UnderlinedComponent >
<UnderlinedComponent>
<Button></Button>
</UnderlinedComponent >
this will just create a bottom border, you can customize it as per your need.这只会创建一个底部边框,您可以根据需要对其进行自定义。
and if you don't know how to use contentComponent
in a drawer.如果您不知道如何在抽屉中使用
contentComponent
。 just see this 看看这个
我通过研究找到了我正在寻找的答案:https://reactnavigation.org/docs/en/drawer-navigator.html#contentoptions-for-draweritems 我发现抽屉内有一个名为itemStyle的属性并使用它如下 itemStyle: { borderBottomWidth: 0.5, borderBottomColor: gray } 将它添加到contentOptions我可以在项目下方创建行:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.