react-native - 带有 React Navigation 的样式标题(从 V3 到 V5)
问题描述
因此,我正在跟随本教程尝试使用 react native 制作应用程序,它使用 react-navigation v3,但我正在尝试使用 v5。问题在于,以前在旧版本中工作的样式不再适用。
**// setup of navigator**
const Stack = createStackNavigator();
const Travel = () => {
return (
<Stack.Navigator initialRouteName="List">
<Stack.Screen name="Article" component={Article} />
<Stack.Screen
name="List"
component={List}
options={{
title: null,
}}
/>
</Stack.Navigator>
);
};
**// screen in question - List**
const styles = StyleSheet.create({
flex: {
flex: 1,
},
row: {
flexDirection: 'row',
},
header: {
backgroundColor: 'orange',
},
});
export default class List extends React.Component {
static navigationOptions = {
header: (
<View style={[styles.flex, styles.row, styles.header]}> **// styles won't get applied for some reason**
<View>
<Text>Search for a place</Text>
<Text>Destination</Text>
</View>
<View>
<Text>Avatars</Text>
</View>
</View>
),
};
render() {
return <Text>List</Text>;
}
}
我不知道如何使这项工作看起来像这样:目标导航 知道如何将此代码从教程中的 v3 版本更新到 react-navigation 的 v5 支持版本吗?
更新:我已经用这段代码更接近目标了:
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View } from 'react-native';
import Article from '../screens/Article';
import { List } from '../screens/List';
const Stack = createStackNavigator();
const ListHead = () => {
return (
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'orange',
}}
>
<View>
<Text>Search for a place</Text>
<Text>Destination</Text>
</View>
<View>
<Text>Avatars</Text>
</View>
</View>
);
};
const Travel = () => {
return (
<Stack.Navigator initialRouteName="List">
<Stack.Screen name="Article" component={Article} />
<Stack.Screen
name="List"
component={List}
options={{
headerTitle: () => <ListHead />,
}}
/>
</Stack.Navigator>
);
};
export default Travel;
但是,我无法像目标照片那样将它们正确隔开,并且它们不会占据整个宽度。
解决方案
在 react-navigation v5 中,您可以将headerLeft和headerRight用于这样的自定义导航标题。您还可以根据需要指定样式。
这是代码示例
export default class List extends React.Component {
static navigationOptions = {
headerLeft: () => (
<View>
<Text>Search for a place</Text>
<Text>Destination</Text>
</View>
),
headerRight: () => (
<View>
<Text>Avatars</Text>
</View>
),
// you can specify your styles here also
headerStyle: {},
headerRightContainerStyle: {},
headerLeftContainerStyle: {},
};
render() {
return <Text>List</Text>;
}
}
我希望这会对你有所帮助。!
推荐阅读
- java - Spring Boot 找不到 Thymeleaf(消息)属性文件
- html - 具有列环绕和不同高度的引导垂直对齐
- powershell - 使用嵌套模块加载 PowerShell 模块会出现错误
- javascript - jQuery - 检测元素是否在视口中
- php - 我的验证器功能有什么问题?
- .net - 如何处理 EndSave 事件(AutoCAD .net vb)?
- javascript - 修改 Web Speech API 的问题?
- android - Google Pixel 中的指纹扫描错误
- ibm-midrange - 如何知道哪些成员嵌入了 SQL
- c - 如何在c中用'%30'替换字符串中的空格