react-navigation的navigationOptions 中如何调用当前类的事件方法



  • export default class WebViewPage extends Component {
        static navigationOptions = ({ navigation }) => ({
            headerTitle: navigation.state.params.title,
            headerTintColor: "#fff",   
            headerStyle: { backgroundColor: user.theme.themeColor,height: Platform.OS=="ios"? 64: 48},
            headerRight: (
                <View style={{flexDirection: 'row'}}>
                    <TouchableOpacity
                        ref='button'
                        style={{flex: 1, justifyContent: 'center', alignItems: 'center', padding: 8}}
                        onPress={()=>{ }}>
                        <Icon name="refresh" size={px2dp(28)} color="#fff" />
                    </TouchableOpacity>
                </View>
            )
        });
        _reload() {
            console.log("aaaaaaa");
        }
    

    headerRight中onPress如何调用_realod()


  • administrators

    let _this = null;
    
    export default class WebViewPage extends Component {
        static navigationOptions = ({ navigation }) => ({
            // ......
                        onPress={() => _this.reload() }>
            // ......
            )
        });
       componentDidMount() {
           _this = this;
       }
        _reload() {
            console.log("aaaaaaa");
        }
    


  • @晴明 牛X,thinks


  • administrators

    但是如果class有多个实例的话,可能会造成干扰
    所以官方推荐的方法是使用navigation.setParams方法把数据或方法set到params里去,然后从navigationOptions中,通过navigation.state.params取出来



  • @晴明 好思路。不过不能用const
    我用到这里的时候,需要一个状态比如edit是否为true,利用这种的可以修改edit值,但是,它不重绘(这里不是render知道不是直接重绘),求解。。有没有其他方法。没有的话,就只能header:null,然后手动做头部了。


  • administrators

    @cloudsafe 我上面不是说了别的方案吗,setParams就相当于navigation的setState



  • @晴明 我这里一直提示是(比如params.editState)undefined。。。ps:tabNavigator
    static navigationOptions = ({navigation}) => {

        return {
            headerTitle: '购物车',
            tabBarLabel: '购物车',
    
            tabBarIcon:({tintColor}) => (<Icon name="shopping-cart" color={tintColor} size={30}/>),
            showIcon:'true',
            headerRight:<TouchableOpacity onPress={()=>{navigation.setParams({editState:!navigation.state.params.editState})}}><Text >{navigation.state.params.editState?'完成':'编辑'}</Text></TouchableOpacity>,
            headerStyle:{
                backgroundColor:'red',
            }
        };
    };
    

    错误提醒:Cannot read property 'editState' of undefined
    Unhandled JS Exception: Cannot read property 'editState' of undefined

    刚才拿购物车的测试了下,StackNavigator如果不让他出现错误,需要在navigate的时候加上该editState但是,tab的就不知道该用啥了,我打印对比了下stack和tab的navigation,都不加editState的时候,stack的params存在值为undefined,tab的没有params。。。。刚好我的购物车两种存在形式,一个stack一个tab。。。。。tab的有啥方法没。


  • administrators

    你加个初始值判断或者直接给个默认值不就完了

    let { params = { editState = false } } = navigation.state;
    


  • @晴明 let { params = {} : { editState = false } } = navigation.state; 这个语法错误,
    static navigationOptions = ({navigation}) => {
    let { params = {} } = navigation.state;
    console.log(navigation,444)//无params
    let { params = {editState:false} } = navigation.state;
    console.log(navigation,555)//无params
    如果是用navigation.setParams({editState:false}),在headerRight里面引用还是提示undefined。
    移动到headerRight中后,如下代码,可以实现,但是,有个warning
    headerRight:<TouchableOpacity onPress={()=>{navigation.setParams({editState:!navigation.state.params.editState})}}><Text >{typeof(navigation.state.params)=="undefined" ?navigation.setParams({editState:false}):navigation.state.params.editState?'完成':'编辑'}</Text></TouchableOpacity>,
    但是出来一个warning:
    Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.
    如果是移动到componentWillMount(){typeof(navigation.state.params)=="undefined" ?navigation.setParams({editState:false}):''}里面,还是会报headerRight找不到editState


  • administrators

    你只是创建了一个名为params的变量,不是往state里写入了这个变量

    总之就是取值params.editState的时候,做个两层预判或默认值就完了

    let { params = {editState:false} } = navigation.state;
    let { editState } = params ;
    ...
    
     onPress={()=>{navigation.setParams({editState:!editState })}}
    


  • @晴明 thx,已搞定。



  • @fighterweb 说:

    navigation 在哪定义的??

    我是在index.android.js中初始化的 tabNavigator 想在配置中 使用setParams设置的值。 求助 谢谢


登录后回复