坑之 react-navigation

1. yarn add react-navigation

2. import {StackNavigator } from 'react-navigation';

class MainScreen extends React.Component {
  constructor(props) {
    super(props)
  }
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to My's profile" style={{backgroundColor: 'red', width: 40, height: 20}}
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />
    );
  }
}

class ProfileScreen extends React.Component {
  constructor(props) {
    super(props)
  }
  static navigationOptions = {
    title: 'My Profile',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button style={{backgroundColor: 'blue', width: 40, height: 20}}
        title="Go to MainPage"
        onPress={() =>
          navigate('Main', { name: 'Jane' })
        }
      />
    );
  }
}

///////////////////////////
// 这里最为重点, 路由对象包含两个视图,   将其理解为一个  组件对象, 有默认视图组件
///////////////////////////
const NavigationApp = StackNavigator({
  Main: {screen: MainScreen},
  Profile: {screen: ProfileScreen},
});

export default class NavigationComponent extends Component<{}> {
  render() {
    return (
      <View style={{backgroundColor: 'yellow', flex: 1, flexDirection: 'row'}}>
        <NavigationApp/>
      </View>
    )
  }
}

3. 引导页(路由重置)

   import { NavigationActions } from 'react-navigation'
   
   componentDidMount() {
       const resetAction = NavigationActions.reset({
           index: 0,
           actions: [
             NavigationActions.navigate({ routeName: 'AppPage'})
           ]
       })
   
     this.timer = setTimeout(()=> {
         this.props.navigation.dispatch(resetAction)
    }, 2000)
   }
   
   componentWillMount() {
       this.timer && clearTimeout(this.timer)
   }