javascript - 如何在我的抽屉回声中放入文本下方的灰色反应导航线?
问题描述
我想做这样的事情,我唯一需要知道的是如何制作出现在每个组件下的灰线。顺便说一句,我正在使用反应导航。这就是我想要重新创建的,我只需要知道如何制作中间灰线。 链接图像
我的鳕鱼:
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
在抽屉中使用。看看这个
推荐阅读
- css - 如何在material-ui的禁用选项卡内启用组件行为?
- apache-spark - java.lang.IllegalAccessError:试图访问方法 org.apache.hadoop.metrics2.lib.MutableCounterLong
- python - 没有名为 ConfigParser 的模块
- javascript - 如何在 django 中激活显示更多按钮并每页显示 3 个项目
- variables - 暂存云变量
- amazon-web-services - Amazon Textract 未读取单击复选框字段
- azure - Azure Kubernetes - Isito 与 Nginx 控制器?
- php - 使用 PHP 时如何正确格式化 JSON
- c# - .Net核心将SqlConnection注入服务
- c - 为什么在矩阵乘法运算期间,用于存储累加和的变量比直接访问结果单元更快?