使用（React Native Navigation）将数据发送到另一个组件

Question

我想将基本数据从Home.js组件发送到details.js组件。

我的home.js

import React, { useState, useEffect } from 'react'
import { View, TouchableHighlight, Image, FlatList, ActivityIndicator, Text, StyleSheet } from 'react-native'


function HomeScreen({ navigation }) {
    const [isLoading, setIsLoading] = useState(true)
    const [dataSource, setDataSource] = useState([])

    useEffect(() => {
        fetch('http://www.json-generator.com/api/json/get/bVxGaxSSgi?indent=2')
            .then((response) => response.json())
            .then((responseJson) => {

                setIsLoading(false)
                setDataSource(responseJson)

            })
            .catch((error) => {
                alert(error)
            });

    })
    if (isLoading) {
        return (
            <View style={{ flex: 1, padding: 20 }}>
                <ActivityIndicator />
            </View>
        )
    }
    return (
        <View style={{ flex: 1, paddingTop: 20, paddingHorizontal: 20 }}>
            <FlatList
                data={dataSource}
                renderItem={({ item }) =>
                    <TouchableHighlight onPress={() => navigation.navigate('Details',{text:'alperen'})} underlayColor="white">
                        <View style={styles.button}>
                            <View style={styles.div}>
                                <View style={styles.inlineDiv}>
                                    <Image source={{ uri: 'https://source.unsplash.com/random/900&#x2715700/?fruit' }} style={styles.pic} />
                                    <Text>{item.name}, {item.about}</Text>
                                </View>
                            </View>
                        </View>
                    </TouchableHighlight>


                }
                keyExtractor={({ _id }, index) => _id}
            />
        </View>
    )
}

export default HomeScreen

const styles = StyleSheet.create({
    pic: {
        width: '100%',
        height: 200,
        borderRadius: 20,
    },
    div: {
        shadowColor: "#fff",
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.20,
        shadowRadius: 50,
        elevation: 0,
        marginBottom: 10

    },
    inlineDiv: {
        padding: 5,

    },
    button: {
        alignItems: 'center',
    },
});

这是我的details.js组件

import React, { useEffect } from 'react'
import { View, Text } from 'react-native'


function DetailsScreen( navigation ) {
  useEffect(() => {
    alert(navigation.text)

  })
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text></Text>

    </View>
  );
}

export default DetailsScreen

我想转到另一页，同时要发送和打印数据。该代码当前返回未定义。如何发送数据？可能我可以使用道具，但我不知道用法。

Answer 1

更改

function DetailsScreen( navigation ) {
  useEffect(() => {
    alert(navigation.text)

  })
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text></Text>

    </View>
  );
}

to

function DetailsScreen({navigation}) {
  useEffect(() => {
    alert(navigation.state.params.text)

  })
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text></Text>

    </View>
  );
}

并尝试

Answer 2

在第一个屏幕中

<TouchableHighlight onPress={() => navigation.navigate('Details',{item})} underlayColor="white">

在下一个屏幕中您可以获取数据

this.props.navigation.state.params.item

示例：

<Image source={this.props.navigation.state.params.item.img}/>

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

Answer 3

发送数据操作成功，但是详细信息页面不起作用。我看了“反应导航文档”（https://reactnavigation.org/docs/en/params.html）。我们必须使用一个关键字（“ route”）。

function DetailsScreen({ route }) {
  const { text } = route.params;
  useEffect(() => {

    var a = JSON.stringify(text)
    alert(a)
  })
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text></Text>

    </View>
  );
}

我尝试了此代码及其成功的工作。