引入依赖
yarn add @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context
react-native-screens 需要配置 android/app/src/java/.../MainActivity.java
下才能正常运行
// 文件顶部包导入语句最后导入这个包
import android.os.Bundle;
// 在 MainActivity 函数的最后添加以下函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
将应用包装在 NavigationContainer
中
// src/router/index.tsx
import React from 'react';
import Test from '@/screens/Test';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function Router() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="test">
<Stack.Screen
name="test"
component={Test}
options={{title: 'Overview'}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default Router;
修改 src/index.js 的 APP.tsx 文件的路径
// src/index.js
import App from '@/App';
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
在 src/App.tsx(原来根目录下的 App.tsx 已经移动到 src 下了)中导入 router
import React from 'react';
import Router from '@/router';
function App() {
return <Router />;
}
export default App;
最后,在 src/screens 目录下引入页面文件 Test(其实就是原来 App.tsx 的示例文件)
import React from 'react';
import type {PropsWithChildren} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
type SectionProps = PropsWithChildren<{
title: string;
}>;
function Section({children, title}: SectionProps): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
}
function Test(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Section title="Step One">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
</Section>
<Section title="See Your Changes">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
},
highlight: {
fontWeight: '700',
},
});
export default Test;