代码之家  ›  专栏  ›  技术社区  ›  laurent

使用navigation.goBack()时,如何将数据发送回上一个sceen?

  •  0
  • laurent  · 技术社区  · 6 年前

    我在屏幕1中导航到屏幕2,使用:

    navigation.navigate('Screen2')
    

    从这个屏幕,我想转到上一个屏幕,很简单:

    navigation.goBack()
    

    navigation.goBack({ myData: 'something' }) 所以我想知道,一般来说,推荐的方法是什么?

    3 回复  |  直到 6 年前
        1
  •  27
  •   Ravi    6 年前

    有两种方法可以解决:

    1:使用导航方法

    通过导航调用该屏幕时传递方法:

    this.props.navigation.navigate('Screen2', {
      onGoBack: this.refresh,
    });
    
    refresh=(data)=> {
    
    }
    

    当你按back键时,像这样传递数据

    this.props.navigation.state.params.onGoBack('123');
    this.props.navigation.goBack();
    

    如果您在应用程序中使用redux,只要在用户按下back按钮时更新redux store,就可以在上一个屏幕中获得store值。

        2
  •  5
  •   Pedro Martins    6 年前

    // SCREEN 1
    import React from "react";
    import { Button, Text, View } from "react-native";
    
    class Screen1 extends React.Component {
      state = { selected: false };
    
      onSelect = data => {
        this.setState(data);
      };
    
      onPress = () => {
        this.props.navigate("Screen2", { onSelect: this.onSelect });
      };
    
      render() {
        return (
          <View>
            <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
            <Button title="Next" onPress={this.onPress} />
          </View>
        );
      }
    }
    
    // SCREEN 2
    import React from "react";
    import { Button } from "react-native";
    
    class Screen2 extends React.Component {
      goBack() {
        const { navigation } = this.props;
        navigation.goBack();
        navigation.state.params.onSelect({ selected: true });
      }
    
      render() {
        return <Button title="back" onPress={this.goBack} />;
      }
    }
    
        3
  •  -1
  •   vonovak    6 年前

    如果您使用的是v2或更高版本,另一种可能是使用 navigate 功能,提供 key routeName 你要返回的路线和 params . 文件: https://reactnavigation.org/docs/en/navigation-actions.html#navigate