React Native使用react-native-navigation时动态改变title

目的

实现react-native-navigation中header title的动态改变。

方法

通过react-native-navigation进行页面切换，新页面的title可以通过如下方式进行设置：

static navigationOptions = ({ navigation }) => ({        

    title: '新页面'

});

navigation中有state成员，可以通过把需要显示的标题设置在state中，再在显示标题的时候读取出来，就可以实现动态改变title。而新页面的标题也可以在调用navigate的时候，通过在state中设置title的值来显示。

举例

显示title

static navigationOptions = ({ navigation }) => ({

    title: `${navigation.state.params.title}`

});

动态改变title

const { setParams } = this.props.navigation;

setParams({ title: '新页面-2' });

navigate新页面时传递title

let state = { title: '新页面' };

this.props.navigation.navigate('id', state);

---

React Native随记 

© 2019-02-24 liushuohui