1. Customize routes

It is well known that both native Android and iOS have a default routing stack management class. Since React Native does not officially provide a component for route management, we need to use the Stack.Navigator component provided by the React-Navigation plugin to manage routes.

Stack.Navigator uses a named route, which means the route needs to be declared before it can be used. To facilitate the management of the routing page, we will put the routing in a single location, for example under the Screens package, as shown below.

Next, we create a new constant in the screens/ Index.js file for the project, mainly to manage the declared routes, as shown below.

export const stacks = [ { name: 'AllMovieScreen', component: AllMovieScreen, options: {headerShown: false}, }, { name: 'CitySelectScreen', component: CitySelectScreen, options: {title: 'select city '},},...Copy the code

Then we create a new mainStackscreen. js file to do hops, returns, and so on. In the meantime, another function of the MainStackScreen class is to unify the navigation bar style, as shown in the code below.

onst MainStack = createStackNavigator();

function MainStackScreen({navigation}) {
  return (
    <MainStack.Navigator
      initialRouteName="App"
      screenOptions={{
        headerTitleAlign: 'center',
        headerStyle: {
          shadowOffset: {width: 0, height: 0},
          shadowColor: '#E5E5E5',
          backgroundColor: '#fff',
        },
        gestureEnabled: true,
        headerBackTitleVisible: false,
        headerLeft: () => (
          <TouchableOpacity
            onPress={() => navigation.goBack()}
            style={{padding: 10, paddingRight: 30}}>
            <Icon name="chevron-thin-left" size={20} color="#222222" />
          </TouchableOpacity>),
      }}>
      <MainStack.Screen
        name="App"
        component={BottomTab}
        options={{headerShown: false}}/>
      {stacks.map((item, index) => (
        <MainStack.Screen
          key={index.toString()}
          name={item.name}
          component={item.component}
          options={item.options}/>
      ))}
    </MainStack.Navigator>
  );
}

export default MainStackScreen;
Copy the code

In the code above, we create a creens/index.js file to declare the applied route, and then use the Map loop in the MainStackScreen class to register the route. As you can see, the route management is very clear. When a new page is created, you just need to add the route to the creens/index.js file.

2. Tab navigation

In React Native application development, React-Navigation supports Tab and Drawer navigation in addition to route management. Also, in the latest versions, the libraries that Tab, Drawer, and Stack navigation rely on are separate, so they need to be installed separately during development.

For Tab navigation, you need to install the bottom-tabs library required by Tab navigation in your project.

npm install @react-navigation/bottom-tabs    
Copy the code

The createBottomTabNavigator() method is used to create Tab navigation. It provides two properties, the Navigator and the route, for Tab. Finally, you need to wrap them using the NavigationContainer component, as shown below.

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {NavigationContainer} from '@react-navigation/native'; const BottomTabs = createBottomTabNavigator(); export default function BottomTabScreen() { return ( <NavigationContainer> <BottomTabs.Navigator initialRouteName="Home"  screenOptions={({route}) => ({ tabBarIcon: ({focused}) => { return ( <Image source={ focused? tabImage[`${route.name}_active`] : tabImage[route.name] } style={{width: 26, height: 26}}/> ); }})} tabBarOptions={{ activeTintColor: 'tomato', inactiveTintColor: 'gray', style: { backgroundColor: '# FFF ',},}}> <BottomTabs.Screen name="Home" component={{tabBarLabel: 'movie ',}}/>... <BottomTabs.Screen name="Mine" component={MineScreen} options={{tabBarLabel: 'my ',}}/> </BottomTabs.Navigator> </NavigationContainer>); }Copy the code

In addition, the Bottom-Tabs plugin provides many other useful components and properties that developers can choose from. Run the above code and you will see something like the following image.

3. Data transmission

Sometimes there is a need to jump to the next page and send back when you have selected the data on the next page. Such as:

In the above scenario, we need to filter the list of activities, so after jumping to the activity filter page, we need to send back the selected activity type. For this scenario, what do we need to do with react-Navigation?

First, we register the activity type page in the Screens /index.js file, as shown below.

{ name: 'SelectorScreen', component: SelectorScreen, options: nav => { const {route} = nav; const {params = {}} = route; Const {title = 'activity type ', onRightPress = () => {}} = params; return { title, headerRight: () => ( <TouchableOpacity onPress={onRightPress} style={styles.button}> <Text style={{color: '#fff', fontSize: </Text> </TouchableOpacity>),}; }},Copy the code

At the same time, the activity filter page’s data is passed from the activity list page. So when using, you only need to use the routing tool encapsulated above to perform the jump operation, the code is as follows.

navigate('SelectorScreen', {
      values: categories.map(c => c.andGroupName),
      defaultValues: categoryName,
      onConfirm: changeCategory,
    });

Copy the code

As you can see, to get the data for the filter page selection, we define an onConfirm callback at jump time. Next, we receive the activity data from the previous page on the new activity filter page and display it as a list, as shown below.

function SelectorScreen({navigation, route}) { const {values = [], defaultValues = [], onConfirm} =route.params || {}; const [selected, setSelected] = useState(defaultValues); const _onRightPress = () => { onConfirm(selected); navigation.goBack(); }; useEffect(() => { navigation.setParams({onRightPress: _onRightPress}); }, [selected]); const onPressItem = val => { let arr = []; arr = [val]; setSelected(arr); }; const renderItem = ({item}) => { const renderRight = () => { const isSelected = selected.includes(item); return ( <ListItem text={item} renderRight={renderRight} onPress={() => onPressItem(item)} /> ); }; return ( <View style={styles.bg}> <FlatList keyExtractor={(item, index) => item + index} data={values} renderItem={renderItem} ListFooterComponent={<View height={120} />} /> </View> ); }; Const styles = StyleSheet. Create ({... . // Omit the style code}); export default SelectorScreen;Copy the code

After selecting the activity type, how to return the result of the selection to the previous page. This is where the onConfirm callback function defined earlier is used, as shown below.

const {values = [], defaultValues = [], onConfirm} =route.params || {}; const _onRightPress = () => { onConfirm(selected); // The onConfirm callback function returns datanavigation.goback (); };Copy the code