React Navigation Fundamentals - fantasy0107/notes GitHub Wiki

官方文件

react native route

安裝

Navigation lifecycle

從 A 到 B 時會觸發 componentWillUnmount , 再回來的時候會 mount

建立 route

Creating a stack navigator

createStackNavigator - 回傳 react component 的 function
routeName : ComponentName

const RootStack = createStackNavigator(
  {
    Home: HomeScreen, //navigate Home 會呼叫 HomeScreen component
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home', // 初始化
  }
);

跳多個不同 stack 的解法

編輯 header bar

  • navigationOptions

使用 parameters 在 title

static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

events

  • willFocus - the screen will focus
  • willBlur - the screen will be unfocused
  • didFocus - the screen focused
  • didBlur - the screen unfocused

用法

  • A -> B 再回到 A 時要重新採取某些措施
componentDidMount() {
    const {navigation} = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
        // 做些事 ex: call api
    });
}
componentWillUnmount() {
    this.focusListener.remove();
}


const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

// Returns true if the screen is focused and false otherwise.
let isFocused = this.props.navigation.isFocused();

porps

navigation props 會自動被注入給所有 screen components

this.props.navigation

.navigate('RouteName') - 推入一個新的 route 到 stack(如果沒有的話)(存在於 stack route 會跳到那頁)
.navigate('RouteName', { A : 'value'} ) - 丟參數給route
.getParam(paramName, defaultValue) - 取得從 navigation 而來的參數
.state.params - 這會是 null 假如沒有參數傳過來
.state 

{
  // the name of the route config in the router
  routeName: 'profile',
  //a unique identifier used to sort routes
  key: 'main0',
  //an optional object of string options for this screen
  params: { hello: 'world' }
}

.push('RouteName') - 會一直推入 route
navigation.push(routeName, params, action)

.goBack() - 會到上一個畫面 
navigation.goBack(SCREEN_KEY_B) // will go to screen A FROM screen B 

.popToTop() - 可以回到在 stack 裡的第一個screen

.pop() - 回到 stack
navigation.pop(n)

.replace() - 取代現在的 route
navigation.replace(routeName, params, action)

.dismiss() -  dismiss the current stack

.reset() -  wipe the navigator state and replace it with the result of several actions

reset/replace/push/pop/popTop 參數

header bar

static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
      headerStyle : headerStyle, // View that wraps the header 
      headerTintColor : headerTintColor, // the back button and title both use this property as their
      headerTitleStyle : headerTitleStyle, //  customize the fontFamily, fontWeight and other Text style for title
      headerRight: (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"
          color="#fff"
        />
      ),
      headerLeft : (
        <View></View>
      )
    };
}

// 設定 navigationOptions 
<Button
    title="Update the title"
    onPress={() => this.props.navigation.setParams({otherParam: 'Updated!'})}
/>

// 預設 navigationOptions 
const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

// 用客製化的原件取代 title
class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./spiro.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
  };

  /* render function, etc */
}

筆記

// 當直接 navigate 到 D時會出觸發 A~D 所有的 componentDidMount 所以要注意 stack 裡的順序
const HomeStack = createStackNavigator({
  A: AScreen,
  B: BScreen,
  C: CScreen,
  D: DScreen,
});

優化

使用 react-native-screens

使用前後的記憶體比較

底端

⚠️ **GitHub.com Fallback** ⚠️