React Native——嵌套WebView中的返回处理

Posted 2020-10-17 郑叶叶

情景描述：

        从一个名为“My”的组件点击进去，进入一个列表(该列表内容为webView中内容)，其中一个webView也可以点击进入详情页(也为webView)，但是如果对导航栏不做任何处理，直接点击返回按钮，便会直接从详情页跳转至最顶层页面，而返回不到该列表内容页；很显然这并非我们想要的效果，于是就需要在原有导航返回事件中增加对webView返回事件的处理，完整代码如下(由于拍的视频格式有问题，就看不了效果图了~~~桑心，只能凑合看看代码了)：

export class CommonProblem extends Component {//自定义一个组件
    static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: ‘常见问题‘,   //导航标题
            headerTitleStyle: {
                alignSelf: ‘center‘,
                textAlign: ‘center‘,
                fontSize: 16,
                color: ‘#FFF‘
            },
            headerLeft: (
                <TouchableHighlight
                    activeOpacity={1}
                    underlayColor={skin.main}
                    onPress={() => {
                        navigation.state.params.goBackPage();
                    }}
                >
                    <View style={{ paddingLeft: 20 }}>
                        <Icon name="ios-arrow-round-back-outline" size={30} style={{ color: ‘#FFF‘ }} />
                    </View>
                </TouchableHighlight>
            ),
                                                //导航左与导航右是为了让导航标题居中(Why?)
            headerRight: <View style={{ paddingRight: 20 }} />
        };
    };

    constructor(props) {
        super(props);
        this.nav = this.props.navigation;//导航
        // 添加返回键监听(对android原生返回键的处理)
        this.addBackAndroidListener(this.nav);
    }
    componentDidMount() {
        this.props.navigation.setParams({//给导航中增加监听事件
            goBackPage: this._goBackPage
        });
    }

                //自定义返回事件
    _goBackPage = () => {
                                //  官网中描述:backButtonEnabled: false,表示webView中没有返回事件，为true则表示该webView有回退事件
        if (this.state.backButtonEnabled) {
            this.refs[‘webView‘].goBack();
        } else {//否则返回到上一个页面
            this.nav.goBack();
        }
    };
    //获取链接
    getSource() {//config.HelpProblemUrlTest是webView的地址(一个独立的H5页面)
        if (!config.Release) {
            return config.HelpProblemUrlTest;
        }
        return config.HelpProblemUrl;
    }

    onNavigationStateChange = navState => {
        this.setState({
            backButtonEnabled: navState.canGoBack
        });
    };

    // 监听原生返回键事件
    addBackAndroidListener(navigator) {
        if (Platform.OS === ‘android‘) {
            BackHandler.addEventListener(‘hardwareBackPress‘, this.onBackAndroid);
        }
    }

    onBackAndroid = () => {
        if (this.state.backButtonEnabled) {
            this.refs[‘webView‘].goBack();
            return true;
        } else {
            return false;
        }
    };
    render() {
        let Dimensions = require(‘Dimensions‘);
        let { width, height } = Dimensions.get(‘window‘);
        return (
            <View style={{ backgroundColor: skin.lightSeparate, flex: 1 }}>
                <WebView
                    source={{ uri: this.getSource() }}
                    style={{ flex: 10, justifyContent: ‘center‘, alignItems: ‘center‘, width: width }}
                    ref="webView"
                    onNavigationStateChange={this.onNavigationStateChange}
                />
            </View>
        );
    }
}

        这样就完美的达到了自己想要的问题咯。