React Native开发React Native 开发React Native开发经验集

React Native static navigationOp

2019-09-19  本文已影响0人  星辰大海_王

问题:我在navigationOptions中添加一个按钮,点击按钮会调用一个方法,出现xxx is not function。🈶以下两种解决方案:

方案一:全局that(推荐)

1.声明一个全局that:
let that;
2.在组件的constructor方法中用this赋值:

constructor(props) {
        super(props);
        that = this;
}

3.静态方法中用that调用你的方法:
that.goAddConPage();

static navigationOptions = ({ navigation, props }) => {
        const title = navigation.getParam('title');
        return {
            gesturesEnabled: false,
            title,
            headerRight:
                (<TouchableOpacity
                    style={paddingright = 10}
                    activeOpacity={0.88}
                    onPress={() => {
                        that.goAddConPage();
                    }}
                >
                       <Text>去添加页面</Text>
               </TouchableOpacity>),
        };
    }

goAddConPage = () => {
         //跳转到添加页面
}

方案二:曲线救国,利用navigation建立自定义方法和当前this的关系。

我们知道navigationOptions方法中可以获取当前的导航信息和属性,我们是不是可以利用navigation的params,将我们想要调用的方法作为一个参数存到navigation的params中,在调用时也利用navigation的params去调用目标方法,比如:
1.调用,navigation.state.params.goAddConPage()

static navigationOptions = ({ navigation, props }) => {
        const title = navigation.getParam('title');
        return {
            gesturesEnabled: false,
            title,
            headerRight:
                (<TouchableOpacity
                    style={paddingright = 10}
                    activeOpacity={0.88}
                    onPress={() => {
                        navigation.state.params.goAddConPage();
                    }}
                >
                     <Text>去添加页面</Text>
               </TouchableOpacity>),
        };
    }

2.在页面加载完成方法中,为当前导航设置一个参数,比如goAddConPage,参数的值正是this.goAddConPage

componentDidMount(){
    this.props.navigation.setParams({goAddConPage:this.goAddConPage})
}

这样,当你点击按钮时,就能触发目标方法啦~~~

根据方案二猜想:利用state或props是不是也可以为你的目标方法建立this指向关系,可以尝试一下~😁,有惊喜😁

上一篇 下一篇

猜你喜欢

热点阅读