react-navigation使用及dva初探二

在上篇文章的基础上，我们只能实现react-navigation的基础功能和效果，要想到达android和ios统一或更好的效果，需要继续学习，
一，ios和android 未实现统一的标题栏效果，ios中title居中，而android则居左显示，查看文档，并没有提供相关的属性，所以需要查看其源码进行修改，在node_modules里面找到react-navigation-src-view目录下

在Header.js中修改如下
351行

  title: {
    bottom: 0,
    left: TITLE_OFFSET,
    right: TITLE_OFFSET,
    top: 0,
    position: 'absolute',
    alignItems: 'center'
    // Platform.OS === 'android'
    //   ? 'flex-start'
    //   : 'center',
  },

即可达到自己想要的标题栏文本样式，那么返回键右边的文字怎么去掉的，同样在同级目录下的HeaderBackButton.js 里面第84行

  {Platform.OS === 'ios' && title && (
            <Text
              onLayout={this._onTextLayout}
              style={[styles.title, { color: tintColor }]}
              numberOfLines={1}
            >
              {renderTruncated ? truncatedTitle : title}
            </Text>
          )}

隐掉这段代码即可，然后再重新再关闭react-package，重新react-native run-ios 或android 即可，
二，标题栏右侧按钮点击事件及动态替换
由于标题栏并未依附于组件，或者并没有在组件初始化后render，所以无法拿到this，在设置点击事件时不能像平常一样设置，代码如下：

class demo extends Component {
    static navigationOptions = {
        header: (state)=>({
            right:( <Button title={'hehe'} onPress={state.params.myparams}/>)
        })

    }
    _menuClick=()=> {
     alert('haha')
    };
    componentWillMount() {
       this.props.navigation.setParams({myparams:this._menuClick})
    }
    }

这样就可以设置点击事件，并做相应的逻辑操作了，如果想动态隐藏或显示标题栏，也可以：

class demo extends Component {
    static navigationOptions = {
        header: ({state}) => ({
            visible: !!state.params && state.params.header === 'visible',
            title: 'Now you see me',
        }),
    }
    render(){
        return(
            <Button
            title="Toggle Header"
            onPress={() => this.props.navigation.setParams({ header: (this.props.navigation.state.params && this.props.navigation.state.params.header === 'visible') ? 'none' : 'visible' })}
        />)
    }
    }

大致我用到的就上面这些，那么如果通过redux来处理app中的导航状态，并统一管理呢，以及使用dva框架来快速集成两者做到快速开发呢，下篇文章再议。