React 导航 6.x 未传递道具

Question

我有如下代码，每次我尝试将参数从主页传递到第二页时，我总是未定义，而且我从来没有得到道具或任何东西。

这是我的 app.js 文件

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  Text,
  View,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from './App/screens/home';
import Second from './App/screens/second';

function HomeScreen() {
  return (
    <Home />
  );
}

function OtherScreen() {
  return (
    <Second />
  );
}


const Stack = createNativeStackNavigator();


const App = () => {

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{ title: 'Overview' }} />
          <Stack.Screen
            name="Second"
            component={OtherScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  );
};

export default App;

这是主页

import React, { useState } from 'react';
import {
    Button,
    Dimensions,
    Platform,
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    useColorScheme,
    View,
} from 'react-native';

import {
    Colors,
    DebugInstructions,
    Header,
    LearnMoreLinks,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { useNavigation } from '@react-navigation/native';

const Home = () => {
    const isDarkMode = useColorScheme() === 'dark';
    const navigation = useNavigation();

    const backgroundStyle = {
        backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };

    return (
        <SafeAreaView style={backgroundStyle}>
            <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={backgroundStyle}>
                <Header />
                <View
                    style={{
                        backgroundColor: isDarkMode ? Colors.black : Colors.white,
                    }}>

                    <Button
                        title="Go to Details"
                        onPress={() => navigation.navigate('Second', { name: "John Doe" })}
                    />


                    <LearnMoreLinks />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
    },
    sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
    },
    sectionDescription: {
        marginTop: 8,
        fontSize: 18,
        fontWeight: '400',
    },
    highlight: {
        fontWeight: '700',
    },
});

export default Home;

这是名为“Second”的屏幕

import React, { useEffect } from 'react';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    useColorScheme,
} from 'react-native';

import {
    Colors,
    Header,
} from 'react-native/Libraries/NewAppScreen';
import { useNavigation } from '@react-navigation/native';
const Second = ({ route }) => {
    const isDarkMode = useColorScheme() === 'dark';
    const navigation = useNavigation();

    useEffect(() => {
        console.log(route)
    })


    const backgroundStyle = {
        backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };

    return (
        <SafeAreaView style={backgroundStyle}>
            <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={backgroundStyle}>
                <Header />

            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    sectionContainer: {
        marginTop: 32,
        paddingHorizontal: 24,
    },
    sectionTitle: {
        fontSize: 24,
        fontWeight: '600',
    },
    sectionDescription: {
        marginTop: 8,
        fontSize: 18,
        fontWeight: '400',
    },
    highlight: {
        fontWeight: '700',
    },
});

export default Second;

我之前尝试过很多解决方案 post 这个问题大部分是版本 4.x 或 5.x

Answer 1

不需要向return屏幕声明函数，直接赋值给组件即可：

const App = () => {

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ title: 'Overview' }} />
          <Stack.Screen
            name="Second"
            component={Second}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  );
};

React 导航 6.x 未传递道具

React navigation 6.x not passing props

reactjs

react-router

react-native

react-navigation