美文网首页
react-navigation随记

react-navigation随记

作者: 埃米莉Emily | 来源:发表于2017-07-13 16:52 被阅读263次
    1. 我们可以在navigationOptions中配置屏幕选项,比如title
    class HomeScreen extends React.Component {
        static navigationOptions = {
          title: 'Welcome',
        };
        render() {
          return <Text>Hello, Navigation!</Text>;
        }
    }
    
    1. 使用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>
          );
        }
    }
    
    1. 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使用
    1. 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',
      },
    });
    
    1. 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)
    

    相关文章

      网友评论

          本文标题:react-navigation随记

          本文链接:https://www.haomeiwen.com/subject/ugbwhxtx.html