react-native navigationOptions与Component进行交互

1. navigationOptions 内部标签切换

 
 
static navigationOptions = ({ navigation }) => ({
 headerTitle:  (
        <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
           
          <TouchableOpacity style={[
           {(!navigation.state.params || (navigation.state.params && navigation.state.params.headerBottom != 2)) ? styles.borderBottom:{}]
          }
                                  onPress={() => {
                                   navigation.setParams({
                                          headerBottom: 1,
                                   });
                            }}>
                    <Text style={}>积分</Text>
                </TouchableOpacity>
            
                <TouchableOpacity style={[(navigation.state.params && navigation.state.params.headerBottom == 2)  ? styles.borderBottom:{}]}
                                  onPress={() => {
                                   navigation.setParams({
                                          headerBottom: 2
                                   });
                            
                            }}>
                    <Text style={}>积分2</Text>
                </TouchableOpacity>
        
        </View>
 ),
});

2 navigationOptions 内部改变组件内的值

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

 headerTitle:  (
 
     <TouchableOpacity 
          onPress={() => {
                navigation.state.params.updateIsCash(false);
                                
           }}>
           <Text style={{color: 'white', fontSize: setSpText(17), alignSelf: 'center', textAlign:'center'}}>积分</Text>
     </TouchableOpacity>
        
 ),
});
componentDidMount() {
    this.props.navigation.setParams({updateIsCash:this._updateIsCash.bind(this) })
   }
_updateIsCash(type) {
   this.setState({isCash:type});
}




猜你喜欢

转载自blog.csdn.net/just_for_your_smile/article/details/80528607
今日推荐