javascript - React Navigation - 带有嵌套导航器的导航选项
问题描述
我还在学习 React Native。我有点知道 React Navigation 是如何工作的。现在我有点卡在导航嵌套上。我会尽量快点。
首先,嵌套导航器的实用方法是什么?
我以某种方式使用嵌套来做到这一点,但遇到了一个问题。我只能在嵌套导航器中更改导航选项,而不是在组件屏幕中。由于我使用自定义标题并使用嵌套导航器,因此我很难从其中一个屏幕打开抽屉菜单。我有一个类似的代码用于测试:
App.js(导航器)
import React, { Component } from 'react';
import { createStackNavigator, createDrawerNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';
import SplashScreen from './SplashScreen';
import MainScreen from './MainScreen';
import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';
const AppStackNavigator = createStackNavigator({
splash: {
screen: SplashScreen
},
mainFlow: {
screen: createDrawerNavigator({
main: {
screen: MainScreen
},
someTab: {
screen: createBottomTabNavigator({
firstTab: {
screen: FirstTabScreen
},
secondTab: {
screen: SecondTabScreen
}
})
}
})
}
});
const AppContainer = createAppContainer(AppStackNavigator);
export default class App extends Component{
render(){
return <AppContainer/>;
}
}
上面的代码将启动 SplashScreen,它很好并且具有以下内容:
闪屏.js
import React, { Component } from 'react';
import { Button, View } from 'react-native';
export default class SplashScreen extends Component {
static navigationOptions = {
header: null
}
go = () =>{
this.props.navigation.navigate('main');
}
render() {
return (
<View>
<Button title='GO NEXT SCREEN' onPress={this.go}/>
</View>
);
}
}
在此屏幕中,导航选项在相同的代码中工作,并且与预期的一样。现在一切都很酷,当我按下按钮并转到下一个屏幕 MainScreen 时:
MainScreen.js
import React, { Component } from 'react';
import { Text, StyleSheet, Button, View } from 'react-native';
export default class MainScreen extends Component {
static navigationOptions = {
header: null
}
drawer = () => {
this.props.navigation.openDrawer();
}
render() {
return (
<View>
<Text style={styles.baseText}>HELLO</Text>
<Button title='DRAWER' onPress={this.drawer}/>
</View>
);
}
}
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
这是问题所在,导航选项在这里不起作用,所以我尝试在导航器本身中设置这些行,如果我将标题配置为 null 但如果我想控制“props.navigation”,它会显示“this.props”。导航'未定义。
所以,理想的问题是,有没有办法让屏幕组件本身的导航选项可用?不知何故?或者有没有办法可以将这个导航选项放在导航器中,并使用不会说它未定义的工作导航道具?
这一切都是因为我想自定义我的标题
非常感谢!
解决方案
您需要使用 withNavigation 在那里提供导航道具,
在这里查看我的答案
推荐阅读
- c# - 关闭拥有的表单时启用/禁用所有者表单上的按钮
- node.js - 建立从 apache angular app 到 rest api node js 的连接
- function - 本地声明的 lua 函数是否在每次传递时都会被解析?
- flutter - 有多个英雄在子树中共享相同的标签而不使用 FAB
- laravel - Laravel-auth-timeout - 事件和监听器
- rust - Rust:为什么第一个借用后来用在这里?
- beagleboneblack - 关于 Beaglebone Black CAN 协议设置
- awk - 使用 grep/awk 从文件中提取信息
- maven - 在 Azure devops 中构建失败
- sql - 如何在 SQL 中的另一个聚合函数上使用 COUNT 函数?