react-navigation使用及dva初探二

来源：互联网发布：linux如何停掉mysql 编辑：程序博客网时间：2024/06/05 15:20

在上篇文章的基础上，我们只能实现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框架来快速集成两者做到快速开发呢，下篇文章再议。

3 0