在 react-native 中的 navigation.goBack() 之后重新加载屏幕答案

【问题标题】：Reload screen after navigation.goBack() in react-native在 react-native 中的 navigation.goBack() 之后重新加载屏幕
【发布时间】：2018-08-07 09:35:56
【问题描述】：

我想在 react-native 中使用 navigation.boBack() 导航后重新加载我的屏幕。

这是我的代码。

 // navigation options
 static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    return {
        headerTitle: "Comment",
        headerTitleStyle: {
            marginLeft: 0,
            width: "100%",
            textAlign: "center",
            fontWeight: 'bold',
            fontFamily: "helvetica",
        },
        headerStyle: {
            paddingLeft: 10,
            paddingRight: 10
        },
        headerLeft: (
            <ClickableIcon
                source={Close}
                height={35}
                width={35}
                onIconPressed={() => {
                    navigation.goBack();
                }}
            />
        ),
        headerRight: <View />
    };
};

我怎样才能做到这一点？

【问题讨论】：

React navigation goback() and update parent state的可能重复

标签： react-native

【解决方案1】：

这会在 goBack() 调用后更新当前组件状态，但不知道如何

import { useIsFocused } from "@react-navigation/native";

  const isFocused = useIsFocused();

  useEffect(() => {}, [isFocused]);

【讨论】：

【解决方案2】：

你可以试试这个。当你的屏幕聚焦时，你可以在那里执行任何代码

componentDidMount(){
    const {navigation} = this.props;
    navigation.addListener ('willFocus', () =>{
    // do whatever you want to do when focused
  });
}

【讨论】：

【解决方案3】：

You can call back screen methods like.
For Example :- You have a Screen A and Screen B.You wants to call Screen A method from 
Screen B on back of the screen.
Navigate Screen B with Callback Method like.

handleOnNavigateBack In ScreenA

//Call this methods from ScreenB
handleOnNavigateBack(commentText) {
    console.log("BACK", commentText);
}

            <TouchableOpacity
                    style={{
                        width: '74%',
                        height: 46,
                        backgroundColor: Colors.buttonBackgroundBlue,
                        alignItems: 'center',
                        alignContent: 'center',
                        justifyContent: 'center'
                    }}
                    onPress={() => this.props.navigation.navigate('ScreenA', {
                        onNavigateBack: this.handleOnNavigateBack.bind(this)
                    })}
                >
                    <Text style={{
                        color: Colors.white,
                        fontFamily: Fonts.font_Montserrat_Bold,
                        fontSize: 15
                    }}>WRITE A REVIEW</Text>
                </TouchableOpacity>

在屏幕 B 中：-

 //Callback For ScreenA
 this.props.navigation.state.params.onNavigateBack(this.state.commentText); 

    this.props.navigation.goBack();

【讨论】：

【解决方案4】：

您可以在导航到屏幕期间将回调函数设置为：

this.props.navigation.navigate('Comment', {
      onBack: () => this.refresh()//function to refresh screen,
    });

并在评论屏幕中按下返回按钮时调用此 onBack 函数：

headerLeft: (
        <ClickableIcon
            source={Close}
            height={35}
            width={35}
            onIconPressed={() => {
                const reloadLastScreen = navigation.getParam('onBack');
                reloadLastScreen();
                navigation.goBack();
            }}
        />
    )

【讨论】：