react-navigation随记

1. 我们可以在navigationOptions中配置屏幕选项，比如title。

class HomeScreen extends React.Component {
    static navigationOptions = {
      title: 'Welcome',
    };
    render() {
      return <Text>Hello, Navigation!</Text>;
    }
}

2. 使用screen navigation prop中的navigate可跳转到指定屏幕上。同时我们可以早在其中放入新路由页面需要的数据，如下例中的user。

class HomeScreen extends React.Component {
    render() {
      const { navigate } = this.props.navigation;
      return (
        <View>
          <Text>Hello, Chat App!</Text>
          <Button
            onPress={() => navigate('Chat', { user: 'Lucy' })}
            title="Chat with Lucy"
          />
        </View>
      );
    }
}

// 当组件加入navigator，就会带有navigation这个props属性
const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Chat: { screen: ChatScreen },
});

// this.props.navigation.state
class ChatScreen extends React.Component {
    static navigationOptions = ({ navigation }) => ({
      title: `Chat with ${navigation.state.params.user}`,
    });
    render() {
      return (
        <View>
          <Text>Chat with {this.props.navigation.state.params.user}</Text>
        </View>
      );
    }
}

3. navigation prop

• navigate(routeName, params, action): Link to other screens
• state: The screen's current state/route
  this.props.navigation.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' }
}

• setParams: 用来改变route/state里的参数
• goBack: 关闭当前屏幕

render() {
      const { goBack } = this.props
      return (
        <View>
          <Button
            onPress={() => goBack()}
            title="Go back from this HomeScreen"
          />
          <Button
            onPress={() => goBack(null)}
            title="Go back anywhere"
          />
          <Button
            onPress={() => goBack('screen-123')}
            title="Go back from screen-123"
          />
        </View>
      )
}

• dispatch: 触发action，需结合NavigationActions使用

4. Navigation Options 配置屏幕导航选项
   我们有两种方式，一是静态配置，如本文第一点；二是动态配置，来自props，包含：

• navigation: navigation state
• screenProps

class ProfileScreen extends React.Component {
      static navigationOptions = ({ navigation, screenProps }) => ({
        title: navigation.state.params.name + "'s Profile!",
        headerRight: <Button color={screenProps.tintColor} {...} />,
      });
  ...

<SimpleApp
      screenProps={{tintColor: 'blue'}}
      // navigation={{state, dispatch}} // optionally control the app
/>

• navigationOptions: 默认或之前没有提供值的选项
  在路由中配置的navigationOptions优先级没有screen中高。

const MyTabNavigator = TabNavigator({
      profile: ProfileScreen,
      ...
 }, {
      navigationOptions: {
      headerTintColor: 'blue',
  },
});

5. Navigation Actions 提供了以下action:

• Navigate: 根据navigate action的结果更新当前state

import { NavigationActions } from 'react-navigation'
const navigateAction = NavigationActions.navigate({
        routeName: 'Profile',
        params: {},
        action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)

• Reset: 擦除整个导航状态，并将其替换为多个动作的结果

import { NavigationActions } from 'react-navigation'
const resetAction = NavigationActions.reset({
      index: 1,  // 用于指定当前活动路由，此处是 ‘Settings‘
      actions: [    // 导航动作的阵列将取代导航状态
        NavigationActions.navigate({ routeName: 'Profile'}),
        NavigationActions.navigate({ routeName: 'Settings'})
      ]
})
this.props.navigation.dispatch(resetAction)

• Back: 返回上一屏幕并关闭当前屏幕

import { NavigationActions } from 'react-navigation'
const backAction = NavigationActions.back({
        key: 'Profile'   // 如果设置，导航将从给定的键返回。如果为空，导航将返回任何地方
})
this.props.navigation.dispatch(backAction)

• SetParams: 当发送SetParams动作时，路由器将产生一个新的状态，该状态改变了特定路由的参数，由key标识

import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
      params: { title: 'Hello' },
      key: 'screen-123',
})
this.props.navigation.dispatch(setParamsAction)