React native 如何在导航屏幕时将react native FlatList中的数据作为道具传递

我正在使用react native FlatList创建数据列表，在RootStack navigator中将FlatList组件作为主屏幕传递，而将Details组件作为DetailsScreen传递。我希望详细信息屏幕显示动态数据，无论flatlist项的id和文本将显示在详细信息屏幕中。我知道如何进入新屏幕，但我无法确定如何将列表组件状态数据作为道具传递给详细组件

我还收到一个错误“失败的子上下文类型”

我希望我明白了。我试图解决这个问题已经三个小时了。如果你能帮我解决这个问题，我会很感激你的

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

class List extends Component {
  state = {
    rows: [
      { id: 0, text: 'View' },
      { id: 1, text: 'Text' },
      { id: 2, text: 'Image' },
      { id: 3, text: 'ScrollView' },
      { id: 4, text: 'ListView' }
    ]
  };

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate(
            'Details',
            {
              /*how to pass data here*/
            }
          )}
      >
        <Text style={styles.row}>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  render() {
    const extractKey = ({ id }) => id;
    return (
      <FlatList
        style={styles.container}
        data={this.state.rows}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>The id is {this.props.id} /*how to get data here*/</Text>
        <Text>you are in {this.props.text} /*how to get data here*/</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator({
  List: List,
  Details: DetailsScreen
});

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flex: 1
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue'
  }
});

import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、平面列表、TouchableOpacity}；
从“react navigation”导入{createStackNavigator，createAppContainer}；
类列表扩展组件{
状态={
行：[
{id:0，文本：'View'}，
{id:1，text:'text'}，
{id:2，文本：'Image'}，
{id:3，文本：'ScrollView'}，
{id:4，文本：'ListView'}
]
};
renderItem=（{item}）=>{
返回(
this.props.navigation.navigate(
"详情",，
{
/*如何在这里传递数据*/
}
)}
>
{item.text}
);
};
render（）{
const extractKey=（{id}）=>id；
返回(
);
}
}
类DetailsScreen扩展了React.Component{
render（）{
返回(
id为{this.props.id}/*如何在此处获取数据*/
您正在{this.props.text}/*如何在此处获取数据*/
);
}
}
const RootStack=createStackNavigator({
列表：列表，
详细信息：详细信息屏幕
});
const-AppContainer=createAppContainer（RootStack）；
导出默认类App扩展React.Component{
render（）{
返回；
}
}
const styles=StyleSheet.create({
容器：{
玛金托普：20，
弹性：1
},
行：{
填充：15，
marginBottom:5，
背景颜色：“天蓝色”
}
});

通过在Expo中粘贴此代码，可以立即获得结果

 <TouchableOpacity
    onPress={() =>
      this.props.navigation.navigate(
        'Details',
        {
          /*how to pass data here*/
          Name:'Jhon Lennon',
          Age: 58 
          Male: true
        }
      )}
  >

class DetailsScreen extends React.Component {

  componentDidMount() {
     this.getInfo();
  }

  getInfo(){
  //you can do it this way or access it directly 
  //var Name =this.props.navigation.getParam('Name ', 'No Name'); //second parameter is a callback
  //var Age=this.props.navigation.getParam('Age', 20);
  //var Male=this.props.navigation.getParam('Male', false);
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>The Name is {this.props.navigation.state.params.Name||'NoName'} /*NoName is also a callback*/</Text>
        <Text>you are {this.props.navigation.state.params.Age||'0'} years old /*0 is the callback*/</Text>
      </View>
    );
  }
}

const AppContainer = createAppContainer(RootStack);

    export default class App extends React.Component {
      render() {
        return <AppContainer />;
      }
    }

export default createAppContainer(RootStack);