我想做这样的事情,我唯一需要知道的是如何使出现在每个组件下方的灰线。
顺便说一句,我正在使用反应导航。
这就是我要重新创建的内容,我只需要知道如何制作中间的灰线。
Link the Image
我的鳕鱼:
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>
最佳答案
只需创建一个通用组件即可,
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
。只是see this