如何将数据发送到项目上的其他屏幕，请单击自定义平面列表的单击

Question

当我单击平面列表上的一个项目时，我正在尝试导航到另一个屏幕。我是新蜜蜂。我尝试使用堆栈导航器，但无法做到这一点。已经陷入困境了3天。我正在使用自定义flatlist。平面列表正常工作，我可以单击平面列表的项目并获取相应的项目数据。现在，我想将该数据发送到另一个屏幕，以在详细视图中显示该数据。我尝试了不同的方法，但我无法在使用OnClick

的地方访问道具

ordersscreen.js

export default class OrdersScreen extends Component {
static navigationOptions = {
    drawerIcon: ({tintColor}) => (
        <Icon name="home" style={{fontSize: 24, color:tintColor}}/>
    )
};
constructor(props) {
    super(props);
    this.state = {
        load : false,
    }
}
componentWillMount() {    
    setTimeout(() => {
        this.setState({
            load : true,
        }); 
    }, 3000);
}
getData() {
    return [
      {
        key: 1, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 2,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 3, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 4,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 5, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 6,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 7, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 8,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 9, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 10,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
    ]
}
render() {
    if(this.state.load){
        return (
            <View style={styles.container}>
                <Header style={{backgroundColor: 'white'}}>
                    <Left style={{position: 'absolute',  flexDirection: 'row', left: 0, marginLeft: 20}}>
                        <Icon name="menu" style={{marginTop:20}} onPress={()=>this.props.navigation.openDrawer()}/>
                        <Text style={styles.titleText}>  Orders!</Text>   
                    </Left>
                </Header>
                <View style={styles.contain}>
                    <CustomListview
                    itemList={this.getData()}
                    />
                </View>
            </View>
        );
    }else{
        return (
            <View style={styles.container}>
                <Header style={{backgroundColor: 'white'}}>
                    <Left style={{position: 'absolute',  flexDirection: 'row', left: 0, marginLeft: 20}}>
                        <Icon name="menu" style={{marginTop:20}} onPress={()=>this.props.navigation.openDrawer()}/>
                        <Text style={styles.titleText}>  Orders!</Text>   
                    </Left>
                </Header>
            <View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#ffffff'}}>
                <ActivityIndicator color={'grey'}/>
            </View>
            </View>
        );
    }
}

}

CustomListView.js

const CustomListview = ({ itemList }) => (
<View style={styles.container}>
    <FlatList
            data={itemList}
            renderItem={({ item }) => <CustomRow
                title={item.title}
                description={item.description}
                image_url={item.image_url}
                id={item.key}
            />}
        />
</View>);export default CustomListview;

custicrow.js

const CustomRow = ({ id, title, description, image_url }) => (
<TouchableHighlight onPress={()=> {
    Toast.show(id + " Pressed", Toast.LONG);
}}>
    <View style={styles.container}>
        <Image source={{ uri: image_url }} style={styles.photo} />
        <View style={styles.container_text}>
            <Text style={styles.title}>
                {title}
            </Text>
            <Text style={styles.description}>
                {description}
            </Text>
        </View>
    </View>
</TouchableHighlight>);export default CustomRow;

Answer 1

将其添加到您的flatlist：

onPress={() => {this.props.navigation.navigate('destinationScreen', {data: item.YourData}); }}

然后在您的DestinationsCreen中接收数据：

<Text>{this.props.navigation.state.params.data}</Text>

不要忘记在app.js中将destinationscreen包括在你的导航器中：

 const AppNavigator = createStackNavigator(
        {
          Home: HomeScreen,
          Details: Screen1,
          destinationScreen: Screen2
        },
        {
          initialRouteName: "Home"
        }
      );

Answer 2

您只需要传递该值，而当您从一个屏幕到下面的另一个屏幕导航时。

let data = {} // You can add your data into it
this.props.navigation.navigate('SCREENNAME', {data})

您可以将上述代码放入 onpress touchableHighlight 的。并将数据发送到下一个屏幕。

进入下一个屏幕，您可以访问以下数据：

let data = this.props.navigation.state.params.data