Question

我使用react-navigation来管理路由。这是我的主页组件：

class HomeScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: {
            firstname: 'John',
            avatar: 'john-profile.png',
            location: 'Canada',
         }
      }
   }

   componentDidMount() {
      AsyncStorage.getItem('userProfile', (errs, result) => {
         this.setState({userProfile: JSON.parse(result)});
      });
   }

   render() {
      return (
         <View>
            <Image src="{this.state.userProfile.avatar}" />
            <Text>Firstname: {this.state.userProfile.firstname}</Text>
            <Text>Location: {this.state.userProfile.location}</Text>
         </View>
      );
   }
}

这是个人资料屏幕：

class ProfileScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: null,
      }
   }

   componentDidMount() {
      AsyncStorage.getItem('userProfile', (errs, result) => {
         this.setState({userProfile: JSON.parse(result)});
      });
   }

   save() {

      var userSavedProfile = this.state.userProfile;

      userSavedProfile.firstname = "Peter";
      userSavedProfile.avatar = "peter-avatar.png";
      userSavedProfile.location = "EEUU";

      this.setState({userProfile: userSavedProfile});

      AsyncStorage.setItem('userProfile',     JSON.stringify(this.state.userProfile), () => {});

   }

   render() {
      return (
         <View>
            <Button title="Save" onPress={() => this.save()}  />
         </View>
      );
   }
}

当我保存新用户信息并按下标题中的后退按钮（反应导航）时，用户配置文件是旧的，名字=约翰等等...当用户按下后退按钮并刷新数据时，如何从主页更新状态？

Answer 1

您可以使用react-native中的BackHandler https://facebook.github.io/react-native/docs/backhandler.html 你可以改变反手的功能

Answer 2

我认为您的应用程序需要一个状态管理器，您可以在其中存储用户信息并在应用程序的任何位置访问它。你应该看一下Redux。它符合您的需求，主屏幕中的信息会自动更新。

Answer 3

但是对于在那里需要此功能的任何人，请响应本机应用程序，这里是您可以尝试的解决方案。使用反应导航。

import {withNavigationFocus} from "react-navigation";
class Profile extends Component {
    ...
}
export default withNavigationFocus(Profile);

Answer 4

有两种解决方法-

1 以参数形式发送回调

class HomeScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: {
            firstname: 'John',
            avatar: 'john-profile.png',
            location: 'Canada',
         }
      }

      this.getUserData = this.getUserData.bind(this);
   }

   componentDidMount() {
       this.getUserData;
   }

   getUserData = () =>{
         AsyncStorage.getItem('userProfile', (errs, result) => {
            this.setState({userProfile: JSON.parse(result)});
         });
    }

   render() {
      return (
         <View>
            <Image src="{this.state.userProfile.avatar}" />
            <Text onPress={()=>this.props.navigation.navigate('ProfileScreen', this.getUserData)}>Firstname: {this.state.userProfile.firstname}</Text>
            <Text>Location: {this.state.userProfile.location}</Text>
         </View>
      );
   }
}
class ProfileScreen extends React.Component {
   constructor(props) {
      this.state = {
         userProfile: null,
      }
   }

   componentDidMount() {
      AsyncStorage.getItem('userProfile', (errs, result) => {
         this.setState({userProfile: JSON.parse(result)});
      });
   }

   save() {

      var userSavedProfile = this.state.userProfile;

      userSavedProfile.firstname = "Peter";
      userSavedProfile.avatar = "peter-avatar.png";
      userSavedProfile.location = "EEUU";

      this.setState({userProfile: userSavedProfile});

      AsyncStorage.setItem('userProfile',     JSON.stringify(this.state.userProfile), () => {});

      //this is the magic
      this.props.navigation.state.params.getUserData();

   }

   render() {
      return (
         <View>
            <Button title="Save" onPress={() => this.save()}  />
         </View>
      );
   }
}

2 在HomeScreen构造器上添加此（肮脏的一个）

this.props.navigation.addListener(
      'didFocus',
      payload => {
        this.setState({is_updated:true});
      }
);

Answer 5

您可以使用componentDidUpdate(){...}插入的componentDidMount(){}

当用户在React Native中按下后退按钮时更新状态

5 个答案: