反应导航goback()并更新父状态

Question

我有一个页面,如果他/她登录将呈现用户的名字,如果他/她没有,则会创建"创建帐户"或"登录"选项.屏幕如下

他们可以导航到"登录"或"创建帐户"页面.成功登录或注册后,它将导航到此页面,并显示用户名.屏幕如下

目前,我存储用户数据AsyncStorage,我想在用户成功登录后更新此字段,或者在从页面重定向时注册.

我怎样才能做到这一点？

有没有办法传递param navigate.goBack(),父母可以听取参数并更新其状态？

Answer 1

当您像这样调用导航时,可以将回调函数作为参数传递:

  const DEMO_TOKEN = await AsyncStorage.getItem('id_token');
  if (DEMO_TOKEN === null) {
    this.props.navigation.navigate('Login', {
      onGoBack: () => this.refresh(),
    });
    return -3;
  } else {
    this.doSomething();
  }

并定义你的回调函数:

refresh() {
  this.doSomething();
}

然后在登录/注册视图中,在goBack之前,您可以这样做:

await AsyncStorage.setItem('id_token', myId);
this.props.navigation.state.params.onGoBack();
this.props.navigation.goBack();

Answer 2

有没有办法传递param navigate.goback(),父母可以听取参数并更新其状态？

您可以将回调函数作为参数传递(如其他答案中所述).

这是一个更清晰的示例,当您从A导航到B并且您希望B将信息传递回A时,您可以传递回调(此处onSelect):

ViewA.js

import React from "react";
import { Button, Text, View } from "react-native";

class ViewA extends React.Component {
  state = { selected: false };

  onSelect = data => {
    this.setState(data);
  };

  onPress = () => {
    this.props.navigate("ViewB", { onSelect: this.onSelect });
  };

  render() {
    return (
      <View>
        <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

ViewB.js

import React from "react";
import { Button } from "react-native";

class ViewB extends React.Component {
  goBack() {
    const { navigation } = this.props;
    navigation.goBack();
    navigation.state.params.onSelect({ selected: true });
  }

  render() {
    return <Button title="back" onPress={this.goBack} />;
  }
}

为debrice做好准备 - 请参阅https://github.com/react-navigation/react-navigation/issues/288#issuecomment-315684617

Answer 3

我遇到了类似的问题,所以这里是我通过更多细节来解决它的方法.

选项一是使用参数导航回父级,只需在父组件中定义一个回调函数:

updateData = data => {
  console.log(data);
  alert("come back status: " + data);
  // some other stuff
};

并导航到孩子:

onPress = () => {
  this.props.navigation.navigate("ParentScreen", {
    name: "from parent",
    updateData: this.updateData
  });
};

现在在孩子身上可以叫:

 this.props.navigation.state.params.updateData(status);
 this.props.navigation.goBack();

方案二.为了从任何组件获取数据,正如另一个答案所解释的那样,AsyncStorage可以同步使用,也可以不同步使用.

保存数据后,可以在任何地方使用.

// to get
AsyncStorage.getItem("@item")
  .then(item => {
    item = JSON.parse(item);
    this.setState({ mystate: item });
  })
  .done();
// to set
AsyncStorage.setItem("@item", JSON.stringify(someData));

或者使用异步函数使其在获得新值时自动更新.

this.state = { item: this.dataUpdate() };
async function dataUpdate() {
  try {
    let item = await AsyncStorage.getItem("@item");
    return item;
  } catch (e) {
    console.log(e.message);
  }
}

有关更多详细信息,请参阅AsyncStorage文档.

Answer 4

对于那些不想通过道具进行管理的人，请尝试此操作。此页面出现时，它将每次调用。

注意*（这不仅适用于goBack，而且每次您进入此页面时都会调用。）

import { NavigationEvents } from 'react-navigation';

    render() {
            return (
              <View style={{ flex: 1 }}>
                <NavigationEvents
                  onWillFocus={() => {
                    // Do your things here
                  }}
                />
              </View>
            );
          }

Answer 5

使用React Navigation v5，只需使用navigate 方法。来自文档：

为此，您可以使用导航方法，如果屏幕已存在，该方法的作用类似于 goBack。您可以通过导航传递参数以将数据传回

完整示例：

import React from 'react';
import { StyleSheet, Button, Text, View } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function ScreenA ({ navigation, route }) {
  const { params } = route;

  return (
    <View style={styles.container}>
      <Text>Params: {JSON.stringify(params)}</Text>
      <Button title='Go to B' onPress={() => navigation.navigate('B')} />
    </View>
  );
}

function ScreenB ({ navigation }) {
  return (
    <View style={styles.container}>
      <Button title='Go to A'
        onPress={() => {
          navigation.navigate('A', { data: 'Something' })
        }}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <Stack.Screen name="A" component={ScreenA} />
        <Stack.Screen name="B" component={ScreenB} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 6

最好的解决方案是使用NavigationEvents。您不需要手动创建侦听器。

Calling a callback function is not highly recommended. Check this example using a listener (Remember to remove all listeners from componentWillUnMount with this option).

Component A:

navigateToComponentB() {
  const { navigation } = this.props
  this.navigationListener = navigation.addListener('willFocus', payload => {
    this.removeNavigationListener()
    const { state } = payload
    const { params } = state
    //update state with the new params
    const { otherParam } = params
    this.setState({ otherParam })
  })
  navigation.push('ComponentB', {
    returnToRoute: navigation.state,
    otherParam: this.state.otherParam
  })
}
removeNavigationListener() {
  if (this.navigationListener) {
    this.navigationListener.remove()
    this.navigationListener = null
  }
}
componentWillUnmount() {
  this.removeNavigationListener()
}

Commponent B:

returnToComponentA() {
  const { navigation } = this.props
  const { routeName, key } = navigation.getParam('returnToRoute')
  navigation.navigate({ routeName, key, params: { otherParam: 123 } })
}

For more details of the previous example: https://github.com/react-navigation/react-navigation/issues/288#issuecomment-378412411

Answer 7

渲染所需组件的最简单方法是使用useIsFocused挂钩。

React Navigation 提供了一个钩子，它返回一个布尔值，指示屏幕是否获得焦点。当屏幕聚焦时，钩子将返回 true；当我们的组件不再聚焦时，钩子将返回 false。

首先将其导入到您想要返回的所需页面中。 import { useIsFocused } from '@react-navigation/native';

然后，将其存储在任何变量中，并使用 React useEffect 钩子渲染组件更改。

请参阅下面的代码或访问：此处

import React, { useState } from 'react';
import { useIsFocused } from '@react-navigation/core';

const HomeScreen = () => {
  const isFocused = useIsFocused();
  
  useEffect(()=>{
        console.log("Focused: ", isFocused); //called whenever isFocused changes
    }, [isFocused]);
    
    return (
      <View>
        <Text> This is home screen! </Text>
      </View>
    )
}

export default HomeScreen;