手把手教你学RN-路由Navigation-step2

在项目中添加多页面，实现页面之间的跳转 .经常要用到路由

React-Navigation

• reactNavigation-docs文档。

1. RN 0.6.0 以上的 安装。

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/stack

1. 进入到项目 IOS下 使用初始化。

pod install

1. 在入口文件App.js 里面引入

import 'react-native-gesture-handler';

import 'react-native-gesture-handler';
import React from 'react';
import AppNavigator from './src/routes/index.js';
const App: () => React$Node = () => {
  return <AppNavigator />;
};
export default App;

4. 封装路由文件StackNavigator

新建一个router文件，与我们常用的vue/react项目结构一样，统一管理路由。

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import HelloWorld from '../components/HelloWorld/HelloWorld.js';
import Pizz from '../components/PizzaTranslator/PizzaTranslator.js';
import Cats from '../components/HelloWorld/Cats.js';
import Moves from '../components/PizzaTranslator/Moves.js';

const Stack = createStackNavigator();
const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HelloWorld1">
        <Stack.Screen name="HelloWorld1" component={HelloWorld} />
        <Stack.Screen name="Moves" component={Moves} />
        <Stack.Screen name="Pizz" component={Pizz} />
        <Stack.Screen name="Cats" component={Cats} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

5. 如何进行路由跳转

常用的方法

• navigation.navigate('路由name').将新的路由推送到堆栈导航器如果已经有了，就不会再加载
• navigation.push('路由name').一直往堆栈里加
• navigation.repalce ('路由name').替换当前webview。
• navigation.goBack();
• navigation.popToTop(); 略过中间，直接回到home

6. 如何传递参数

常用方法

1. navigation.push('路由名称', {Json 参数})

   props.navigation.push('Pizz', {title: '电影ing!'})   

1. navigation.setParams({}) 设置参数。
2. • 初始参数可以通过initialParamsprop传递Screen

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

1. 获取路由参数

在组件参数里面，传入全局{ navigation, route }.在传递参数过程中，尽量减少数据量，且用但数据。不要对象里面嵌套对象。

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  const ChangeTitle = () => {
    console.log(navigation, 'ChangeTitle===', navigation, route);

    navigation.setOptions({title: '新页面-2'});
  };
}

7. 改变Nav-bar title

这个场景我们经常都要遇到。

• Stack.Screen 默认给标题

 <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />

• 用navigation.setOptions().

navigation.setOptions({ title: 'Updated!' })

8. 自定义 Nav-Bar-Title

偶尔会遇到需要通屏，或者自定义按钮的情况

1. 第一种情况，可以在Stack.Screen，里面使用options 参数对应

   1. headerLeft
   2. headerRight
   3. headerBackTitle
   4. headerTruncatedBackTitle
   5. headerBackImage

<Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />

2.使用{navigation,route}

navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount(c => c + 1)} title="Update count" />
      ),
    });

1. 全屏模式 自定义导航栏

headerShown: false

<RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{ headerShown: false }}
      />

总结 学会以上，已经满足了日常的应用。 还有底部的一些导航 createBottomTabNavigator

滑动导航