React Native(十二)——嵌套WebView中的返回處理

情景描述：

        從一個名為“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>
        );
    }
}

        這樣就完美的達到了自己想要的問題咯。