如何在 React Native 中制作类似功能？

Question

Code

Detail.js

constructor(props) {
  super(props);
  this.state = {
    liked = false
  };
}

export default class Detail extends React.Component {
 render() {
  const { liked } = this.state;
  return (
   ...
   <TouchableOpacity
     onPress{() => 
       this.setState({ 
         liked: !liked,
       });
     } 
   >
    ...
   </TouchableOpacity>
   ...
  )
}

---

In this code, this.state.liked is false at first and onPress changes its state.

When coming back to this page, this.state.linked returns to false.

What I want to do is I wanna keep state in this class the latest.

So, I want to keep this.state.liked : true when I come back to this page until I change its' state.

Answer 1

If you want the data to be stored it the app, when you navigate back and forth, then you need to use a common storage.

Basically when you navigate away from the page, this component unmounts , which means it's erased from the DOM along with it's state . (calling componentWillUnmount before it disappears)

As pointed out in the comment: solution could be something like Redux/MobX redux toolkit, etc.

You can even implement your own storage if you like, but this could get tricky if your project grow.

also a note on your constructor, change:

this.state = {
    liked = false // << liked: false
  };