Отправка данных в другой компонент с помощью (React Native Navigation)

Question

Я хочу отправить базовые c данные из дома. js компонент в детали. js компонент.

Мой дом. 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',
    },
});

Это мои данные. 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

Я хочу go перейти на другую страницу и одновременно хочу отправить и распечатать данные. Этот код в настоящее время возвращает неопределенный. Как я могу отправить данные? Возможно, я могу использовать реквизит, но я не знаю, как его использовать.

Answer 1

На первом экране

<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 2

Операция отправки данных прошла успешно, но страница сведений не работает. Я посмотрел «реактивную навигационную документацию» (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>
  );
}

Я попробовал этот код и его успешную работу.

Answer 3

Измените

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

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

    </View>
  );
}

на

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

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

    </View>
  );
}

И попробуйте