Question

我想在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 />
    };
};

我该如何实现？

Answer 1

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.

handleOnNavigate返回到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>

在ScreenB中：-

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

    this.props.navigation.goBack();

Answer 2

这会在goBack（）调用后更新当前组件的状态，但是不知道如何使用

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

  const isFocused = useIsFocused();

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

Answer 3

您可以在导航到屏幕的过程中将回调函数设置为：

Error 429: ActiveX component can't create object

并在“评论”屏幕中按“后退”按钮时调用此onBack函数：

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

Answer 4

您可以尝试一下。当屏幕对准焦点时，您可以在那里执行任何代码

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

在react-native中的navigation.goBack（）之后重新加载屏幕

4 个答案: