use*_*768 5 typescript react-native react-native-navigation
沙盒应用程序包含两个带有 React Native Stack 导航器的屏幕。
当使用按钮显式调用“navigation.navigate("Desired Screen")”时,应用程序表现良好。但是,当尝试使用后退按钮(离开初始路线屏幕时在标题上自动创建)时,屏幕加载大约需要 2 秒。
在打开“调试”和未打开“调试”的真实 Android 设备上进行了测试。这是反应本机导航的预期行为吗?
应用程序.tsx:
import React from 'react';
import {Text, View} from 'react-native';
import {Home} from './src/screens/fornav/Home';
import {MySettings} from './src/screens/fornav/MySettings';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
type RootStackParamList = {
Home: undefined;
MySettings: undefined;
};
const MyStack = createStackNavigator<RootStackParamList>();
const App = () => {
return (
<NavigationContainer>
<MyStack.Navigator initialRouteName="Home">
<MyStack.Screen
name="Home"
component={Home}
options={{title: 'My Home Screen'}}
/>
<MyStack.Screen name="MySettings" component={MySettings} />
</MyStack.Navigator>
</NavigationContainer>
);
};
export default App;
Run Code Online (Sandbox Code Playgroud)
主页.tsx:
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
interface HomeProps {
navigation: any;
}
export const Home: React.FC<HomeProps> = ({navigation}) => {
return (
<View style={styles.viewStyle}>
<Text>{'HOME SCREEN'}</Text>
<Button
title={'Go to settings.'}
onPress={() => navigation.navigate('MySettings')}
/>
</View>
);
};
const styles = StyleSheet.create({
viewStyle: {},
});
Run Code Online (Sandbox Code Playgroud)
我的设置.tsx:
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
interface MySettingsProps {
navigation: any;
}
export const MySettings: React.FC<MySettingsProps> = ({navigation}) => {
return (
<View style={styles.viewStyle}>
<Text>{'SETTINGS SCREEN'}</Text>
<Button title={'Go home.'} onPress={() => navigation.navigate('Home')} />
</View>
);
};
const styles = StyleSheet.create({
viewStyle: {},
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
745 次 |
| 最近记录: |