feat: rn-navigation

src/router/StackNavigation.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-25 14:42:30
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-25 17:18:22
+ * @FilePath: \src\router\StackNavigation.js
+ */
+
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+
+import Home from '../views/Home';
+import Details from '../views/Details';
+const Stack = createStackNavigator();
+
+function StackNavigation() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen
+          name="Home"
+          options={{title: '设置Title'}}
+          component={Home}
+        />
+        <Stack.Screen name="Details" component={Details} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default StackNavigation;

src/router/index.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-25 14:42:04
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-25 14:42:05
+ * @FilePath: \src\router\index.js
+ */

src/views/Details.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-25 14:45:22
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-25 17:49:52
+ * @FilePath: \src\views\Details.js
+ */
+import {Button} from '@ant-design/react-native';
+import React from 'react';
+import {Text} from 'react-native';
+const Details = (props) => {
+  let {navigation, route} = props;
+
+  // route?.params  里接收参数
+  return (
+    <>
+      <Text>Language:{route?.params?.Language ?? ''}</Text>
+      <Text>小米:{route?.params?.target ?? ''}</Text>
+      <Button type="primary" onPress={() => navigation.navigate('Details')}>
+        navigate to Details 不生效
+      </Button>
+
+      <Button type="primary" onPress={() => navigation.push('Details')}>
+        push to Details
+      </Button>
+
+      <Button
+        type="primary"
+        onPress={() =>
+          navigation.push('Details', {
+            Language: 'React native 大法好',
+            target: ' Are you ok',
+          })
+        }>
+        push to Details 带参数
+      </Button>
+
+      <Button type="primary" onPress={() => navigation.push('Home')}>
+        push 回到Home
+      </Button>
+
+      <Button type="primary" onPress={() => navigation.navigate('Home')}>
+        navigate 回到Home
+      </Button>
+
+      <Button type="primary" onPress={() => navigation.goBack()}>
+        返回上一页
+      </Button>
+
+      <Button type="primary" onPress={() => navigation.popToTop()}>
+        popToTop 返回到堆栈中的第一个屏幕
+      </Button>
+    </>
+  );
+};
+
+export default Details;

src/views/Home.js

+/*
+ * @Author: zhuchuanyong
+ * @Date: 2021-01-25 14:44:12
+ * @LastEditors: zhuchuanyong
+ * @LastEditTime: 2021-01-25 17:45:19
+ * @FilePath: \src\views\home.js
+ */
+import {Button} from '@ant-design/react-native';
+import React from 'react';
+
+const Home = (props) => {
+  let {navigation} = props;
+  const gotoDetail = () => {
+    // 跳转页面 并传递参数
+    navigation.navigate('Details', {
+      Language: 'React 大发好',
+      target: '干翻华为 Are you ok',
+    });
+  };
+  return (
+    <>
+      <Button type="primary" onPress={() => gotoDetail()}>
+        Home
+      </Button>
+    </>
+  );
+};
+
+export default Home;