feat: rn-navigation

/*

 * @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;

/*

 * @Author: zhuchuanyong

 * @Date: 2021-01-25 14:42:04

 * @LastEditors: zhuchuanyong

 * @LastEditTime: 2021-01-25 14:42:05

 * @FilePath: \src\router\index.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;

/*

 * @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;