React Native中多屏幕间FlatList数据传递问题求助

一、直接通过route.params链式传递（简单场景首选） #

你已经实现了第一屏到第二屏的参数传递，要继续传到第三屏及后续屏幕，只需要在跳转时把当前屏幕拿到的参数再次通过navigation.navigate的第二个参数传递即可：

1. 修改第二屏代码，添加跳转逻辑并传递参数 #

export default class Screentwo extends Component {
  constructor(props, ctx) {
    super(props, ctx);
    this.state = {
      isReady: false,
      nowshowingmovies: this.props.route.params
    };
  }

  render(){
    const item = this.props.route.params;
    return(
      <View>
        <Image style={styles.itemPhotoBackground} source={{ uri: item.url }} />
        <Text>{item.title}</Text>
        {/* 添加跳转第三屏的按钮，传递当前电影数据 */}
        <TouchableOpacity 
          onPress={() => this.props.navigation.navigate('ThirdScreen', item)}
          style={{marginTop:20, padding:10, backgroundColor:'#ccc'}}
        >
          <Text>跳转到第三屏</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

2. 修正第三屏代码，正确获取参数 #

第三屏需要先从route.params中取出数据，再使用：

export default class ThirdScreen extends Component {
  constructor(props, ctx) {
    super(props, ctx);
    this.state = {
      isReady: false,
      nowshowingmovies: this.props.route.params
    };
  }

  render(){
    // 从props中取出传递的电影数据
    const item = this.props.route.params;
    return(
      <View>
        <Image style={styles.itemPhotoBackground} source={{ uri: item.url }} />
        <Text>{item.title}</Text>
      </View>
    );
  }
}

二、使用React Context（多屏幕共享数据场景） #

如果后续有多个屏幕需要频繁使用这份电影数据，链式传递会变得繁琐，此时可以用React Context统一管理共享数据：

1. 创建Context管理文件 #

// MovieContext.js
import React, { createContext, Component } from 'react';

export const MovieContext = createContext();

export class MovieProvider extends Component {
  state = {
    selectedMovie: null
  };

  setSelectedMovie = (movie) => {
    this.setState({ selectedMovie: movie });
  };

  render() {
    return (
      <MovieContext.Provider
        value={{
          selectedMovie: this.state.selectedMovie,
          setSelectedMovie: this.setSelectedMovie
        }}
      >
        {this.props.children}
      </MovieContext.Provider>
    );
  }
}

2. 在根组件包裹Provider #

在App.js或路由根组件中，用MovieProvider包裹整个导航容器：

import { MovieProvider } from './MovieContext';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <MovieProvider>
      <NavigationContainer>
        {/* 你的路由配置 */}
      </NavigationContainer>
    </MovieProvider>
  );
}

3. 第一屏设置选中的电影数据 #

import { MovieContext } from './MovieContext';

// 第一屏FlatList的TouchableOpacity修改为：
<TouchableOpacity 
  onPress={() => {
    this.context.setSelectedMovie(item);
    this.props.navigation.navigate('Schedule');
  }}
>
  <Image style={styles.itemPhoto} source={{ uri: item.url }} />
  <Text>{item.title}</Text>
</TouchableOpacity>

// 类组件声明contextType
ScreenOne.contextType = MovieContext;

4. 第二、三屏直接从Context获取数据 #

以第二屏为例：

import { MovieContext } from './MovieContext';

export default class Screentwo extends Component {
  // 声明contextType
  static contextType = MovieContext;

  constructor(props, ctx) {
    super(props, ctx);
    this.state = {
      isReady: false
    };
  }

  render(){
    const { selectedMovie } = this.context;
    return(
      <View>
        <Image style={styles.itemPhotoBackground} source={{ uri: selectedMovie.url }} />
        <Text>{selectedMovie.title}</Text>
        <TouchableOpacity 
          onPress={() => this.props.navigation.navigate('ThirdScreen')}
          style={{marginTop:20, padding:10, backgroundColor:'#ccc'}}
        >
          <Text>跳转到第三屏</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

第三屏写法和第二屏完全一致，直接从this.context中读取selectedMovie即可，无需再手动传递参数。

三、状态管理库（如Redux，复杂全局状态场景） #

如果你的应用有大量全局共享状态（比如用户信息、多模块共享数据），可以使用Redux这类状态管理库。但对于简单的电影数据传递，前两种方法已经足够。

内容的提问来源于stack exchange，提问作者randelski