[ 卡卡 DAY 15 ] - React Native 页面导览 Navigation (下)

接下来要在页面上按下按钮跳页
以及按了左边 header icon 回上一页
正所谓有去有回才不会不知道怎麽办！

在 App.js 的 Home 建立一个换页的按钮

navigation.navigate()导览函数：执行页面切换的函数，第一个参数放入要跳转页面的 name，第二个参数则是放入要传递的资料（程序中的 location 是个 JSON ），title 为 header 名字。

const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home Screen</Text>
      // 加入按钮
      <TouchableOpacity
        onPress={() => {
          navigation.navigate('IconScreen', { title: "icon页" });
        }}
        style={{backgroundColor: '#aaa', padding: 5, margin: 5}}
        activeOpacity={0.6}>
        <Text>来去别页！</Text>
      </TouchableOpacity>
      // End
    </View>
  );
};

PS. 切记文字都需要放在 Text 内唷！

route.params 参数变数：接收其它页面传递的参数
接收到的参数可用 route.params 展开，如上面的程序中，Detail 的 Stack 里 options 的 title 设定为 route.params.title，这里是由 route 来接收函数，然後经由 route.params.title 取出 title 来显示。
所以 route.params.title 会回传 "icon 页"

整个 App.js

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {
  Text,
  View,
  Image,
  Platform,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import IconScreen from '@screens/IconScreen';
import {assets} from '@src/constants';

const Stack = createStackNavigator();

const headerOptions = ({route, navigation}) => ({
  title: route.params ? route.params.title : '',
  headerTintColor: 'black', // 字体颜色
  headerTitleStyle: {alignSelf: 'center', fontSize: 16}, // header 样式
  headerStyle: {
    height: Platform.OS === 'ios' ? 88 : 44,
  }, // 使用装置来判断 header 的高度
  headerRight: () => (
    <Image source={assets.actionPrimary} style={[styles.actionPrimary]} />
  ), // 右边放入 icon
  headerLeft: () => (
    <TouchableOpacity
      onPress={() => {
        navigation.goBack();
      }}>
      <Image
        source={assets.actionPrimary}
        style={[styles.actionPrimary]}
        onPress={() => {
          navigation.goBack();
        }}
      />
    </TouchableOpacity>
    // 左边放入icon 并使用 navigation.goBack() 及 backToHome() 回上一页
  ),
});

const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home Screen</Text>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate('IconScreen', {title: 'icon页'});
        }}
        style={{backgroundColor: '#aaa', padding: 5, margin: 5}}
        activeOpacity={0.6}>
        <Text>来去别页！</Text>
      </TouchableOpacity>
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={Home} options={headerOptions} />
        <Stack.Screen
          name="IconScreen"
          component={IconScreen}
          options={headerOptions}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  actionPrimary: {
    width: 56,
    height: 56,
    marginRight: 6,
  },
});

export default App;

以上设定完後，简单的切页、换页传递资料及回上一页就完成了！！