react-native - 如何从一个堆栈屏幕导航到另一个堆栈屏幕?
问题描述
//Navigator2.js
function Navigator2() {
return (
<Navigator2Stack.Navigator
headerMode="screen"
screenOptions={{
headerTintColor: "white",
headerStyle: { backgroundColor: "#1c5e74" },
}}
>
<Navigator2Stack.Screen
name="Screen2"
component={Screen2.js}
options={{
title: "Screen2",
}}
/>
</Navigator2.Navigator>
);
}
export default Navigator2;
//Screen1.js(which is registered in Navigator1 stack)
export const Screen1 = ({navigation}) => {
return (
<View style={styles.screen}>
<Text>Screen1!</Text>
<Button
title="go to Screen2"
onPress={() => navigation.navigate('Navigator2')}
></Button>
</View>
);
};
the folder structure goes like this-->
Navigation Folder
|-->Navigator1.js
|-->Navigator2.js
screens
|-->Screen1.js
Screen1.js 在 Navigator1 文件和屏幕中的堆栈中 regitered Navigator2 我想从 Screen1 导航到 Screen 2 我应该怎么做?
我正在使用反应导航 v5。
解决方案
After a little research, this should do the job:
<Button
title="go to Screen2"
onPress={() => navigation.navigate('Navigator2', { screen: 'Screen2' })}
/>
EDIT:
Here is a full example:
import React from 'react'
import { Button, View, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
const Screen1 = ({ navigation }) => (
<View style={styles.component}>
<Button title="Go to Screen 2" onPress={() => navigation.navigate('Navigator2', { screen: 'Screen2' })} />
</View>
)
const Screen2 = ({ navigation }) => (
<View style={styles.component}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
)
const Navigator1 = createStackNavigator()
const Nav1 = () => (
<Navigator1.Navigator>
<Navigator1.Screen name="Screen1" component={Screen1} />
</Navigator1.Navigator>
)
const Navigator2 = createStackNavigator()
const Nav2 = () => (
<Navigator2.Navigator>
<Navigator2.Screen name="Screen2" component={Screen2} />
</Navigator2.Navigator>
)
const Main = createStackNavigator()
export default props => (
<NavigationContainer>
<Main.Navigator headerMode="none">
<Main.Screen name="Navigator1" component={Nav1} />
<Main.Screen name="Navigator2" component={Nav2} />
</Main.Navigator>
</NavigationContainer>
)
const styles = StyleSheet.create({
component: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
推荐阅读
- javascript - 如何使用变量查询
- php - PHP 扩展和私有
- python - lru 缓存是否应该用于具有 DB 调用的函数
- python-3.x - 在将数据发布到 cloudsearch 期间出现 403
- selenium - BrowserMob 代理和 Webdriverio 最小的空 HAR 文件
- c - SAE J1939 堆栈
- ios - 添加全屏视图作为视图控制器的子视图
- javascript - 如何在 React JS 中使用 Javascript File API 上传本地文件
- reactjs - 使用 React Native 掌握基本的 Redux?
- c# - 如何在 WPF 中使用 ListBox 对键和值进行分组