目錄

• 1、自定義路由
  
• 2、Tab導航
  
• 3、資料回傳
  
• 總結

1、自定義路由

眾所周知，不管是在原生還是iOS，它們都有一個預設的路由路由棧管理類。由於React Native官方沒有提供路由管理的元件，所以我們需要使用react-navigation外掛提供的Stack.Navigator元件來管理路由。

Stack.Navigator使用的命名路由，所謂命名路由，指的是路由需要先宣告然後才能使用。為了方便管理路由頁面，我們會將路由放到一個統一的位置，比如screens包下，如下所示。

然後，我們在專案的screens/index.檔案中新建一個常量，主要用來管理宣告的路由，如下所示。

export const stacks = [
  {
    name: 'AllMovieScreen',component: AllMovieScreen,options: {headerShown: false},},{
    name: 'CitySelectScreen',component: CitySelectScreen,options: {title: '選擇城市'},…. //省略其他路由頁面
];

然後，我們再新建一個MainStackScreen.js檔案，用來實現路由的跳轉、返回等操作。同時，MainStackScreen類的另一個作用是統一導航欄的樣式，程式碼如下所示。

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;

在上面的程式碼，我們建立了一個creens/index.js檔案來申明應用的路由，然後在MainStackScreen 類中使用map迴圈完成路由的註冊。可以看到，經過上面的處理後，路由管理是非常清晰的，當有新的頁面時只需要往creens/index.js檔案中新增路由即可。

2、Tab導航

在React Native應用開發中，react-navigation除了提供路由管理功能外，還支援Tab導航和Drawer導航。並且，在最新的版本中，Tab導航、Drawer導航和Stack導航所依賴的庫是分開的，所以在開發過程中需要單獨安裝。

對於Tab導航來說，需要在專案中安裝Tab導航需要的bottom-tabs庫，命令如下。

npm install @react-navigation/bottom-tabs    

建立Tab導航時需要用到createBottomTabNavigator()方法，它需要提供導航器和路由兩個屬性，分別對應Tab.Navigator和Tab.Screen兩個元件，最後還需要使用NavigationContainer元件包裹它們，如下所示。

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={HomeScreen}
          options={{
            tabBarLabel: '電影',}}/>
         
…. //省略其他程式碼

        <BottomTabs.Screen
          name="Mine"
          component={MineScreen}
          options={{
            tabBarLabel: '我的',}}/>
      </BottomTabs.Navigator>
    </NavigationContainer>
  );
}

同時，bottom-tabs外掛還提hGuRLePyU供了很多其他有用的元件和屬性，開發者可以根據需要進行選擇。執行上面的程式碼，效果下圖所示。

3、資料回傳

有時候，我們有這樣一種需求：跳轉到下一個頁面，並在下一個頁面選擇了資料後進行回傳。比如：

在上面的場景中，我們需要對活動列表進行篩選，那麼在跳轉到活動篩選頁面後，需要回傳選中的活動型別，對於這種場景，我們需要對react-navigation進行怎樣的處理呢？

首先，我們在screens/index.js檔案中註冊活動型別頁面，如下所示。

{
  name: 'SelectorScreen',component: SelectorScreen,options: nav => {
    const {route} = nav;
    const {params = {}} = route;
    const {title = '活動型別',onRightPress = () => {}} = params;
    return {
       title,headerRight: () => (
         <TouchableOpacity
            onPress={onRightPress}
            style={styles.button}>
            <Text style={{color: '#fff',fontSize: 14}}>確定</Text>
         </TouchableOpacity>
        ),};
    },}

同時，活動篩選頁面的資料是由活動列表頁面傳遞過來的。所以在使用的時候，只需要使用上文封裝好的路由工具執行跳轉操作即可，程式碼如下。

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

可以看到，為了獲取篩選頁面選擇的資料，我們在跳轉的時候定義了一個onConfirm回撥函式。接著，我們在新建的活動篩選頁面接收上一個頁面傳遞過來的活動資料並使用列表展示出來即可，如下所示。

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 = S客棧tyleSheet.create({
 …. //省略樣式程式碼
});

export default SelectorScreen;

選擇完活動型別之後，如何將選擇的結果返回給上一個頁面呢。此時就用到了前文定義的onConfirm回撥函式，如下所示。

const {values = [],onConfirm} =route.params || {};

const _onRightPress = () => {
    onConfirm(selected);        //onConfirm回撥函式回傳資料
    navigation.goBack();
 };

總結

到此這篇關於React Native自定義路由管理的文章就介紹到這了,更多相關React Native自定義路由管理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！