Alright, still on my way to build my first react native App, all good except it looks has serious performance issue on my MacBook.

Today I happened to use the Navigator of the React native, I spent some time to integrate it into Redux. I just try to explain what I did as simple as I can.

The example of Navigator in the doc is not very clear, but you can always find out more better examples of how to use it by google. So here, I only explain what I did on transmitting state from ‘Smart Compoent’ to ‘Dumb Component’(looks now they call it Container Component and Presentational Component) through Navigator

Connect Navigator to the Redux store

class Game extends Component {

  renderScene (route, navigator) {
    if (route.component) {
      const Component = route.component
      return <Component navigator={navigator} route={route} {...this.props} />
    }
  }

  render () {
    return (
      <Navigator 
        initialRoute=
        navigationBar={<NavigatorBar />}
        renderScene={this.renderScene.bind(this)}
      />
    )
  }
}

export default connect((state, props) => {
  return {
    live: state.live,
    over: state.over,
    unstart: state.unstart
  }
}, dispatch => {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
})(Game)

I first took the Game component as the Smart component and connect it to the Redux, that is wrong, the lower components can get nothing in ComponentWillReceiveProps after dispatch a new action.

In fact, Navigator will keep all your components in a stack, so it is actually the controller who response for transmit state to lower components.

Use of route of Navigator

The code above only transmit state from Redux store to the lower component, but sometimes we need to send some specific state from some ‘middle’ component to lower component.

  export default class GamePanel extends Component {

  static displayName = 'GamePanel'

  onPressRow () {
    const {navigator, game} = this.props
    navigator.push(Object.assign({}, {
	   name: 'GameEach',
	   component: GameEach,
	   game
	 }))
  }

  render () {
    const {game} = this.props

    return (
      <TouchableHighlight onPress={this.onPressRow.bind(this)} underlayColor="transparent">
        <View>
        </View>
      </TouchableHighlight>
    )
  }
}

Here game is such specific state in middle component, I put it in navigator.push, and in the lower component, I can use this.props.route.game to find it out, that’s way in the fist code peace, I add route in <Component navigator={navigator} route={route} {...this.props}

That’s it, the project will be open source when I finish the first version, and tomorrow I will open Sketch to do some design.