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

Question

我想将 Home.js 组件中的基本数据发送到 details.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',
    },
});

这是我的 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

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

标签： react-nativereact-navigation

Answer 1

改变

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>
  );
}

并尝试