- 首先需要安装 React Native 中的 Async Storage 库:
npm install @react-native-async-storage/async-storage
- 在需要使用 Async Storage 的文件中,引入 AsyncStorage 库:
import AsyncStorage from '@react-native-async-storage/async-storage';
- 在需要存储电影列表的组件中,定义 state:
state = {
movies: [],
}
- 在组件加载时,从 AsyncStorage 中获取电影列表:
async componentDidMount() {
try {
const movies = await AsyncStorage.getItem('watchList');
if (movies !== null) {
this.setState({ movies: JSON.parse(movies) });
}
} catch (error) {
console.log(error);
}
}
- 当用户添加或删除电影时,更新 state 并将更新的电影列表存储到 Async Storage:
addMovie = (movie) => {
const { movies } = this.state;
movies.push(movie);
this.setState({ movies }, async () => {
try {
await AsyncStorage.setItem('watchList', JSON.stringify(movies));
} catch (error) {
console.log(error);
}
});
}
removeMovie = (movie) => {
const { movies } = this.state;
const index = movies.indexOf(movie);
if (index > -1) {
movies.splice(index, 1);
this.setState({ movies }, async () => {
try {
await AsyncStorage.setItem('watchList', JSON.stringify(movies));
} catch (error) {
console.log(error);
}
});
}
}
- 最后,将电影列表传递给需要显示的组件即可:
const { movies } = this.state;
return (
);