Reactjs 在嵌套导航中传递参数

我想将一个参数从Search.js传递到Stats.js 导航器的结构如下所示：

Search.js

const Search = () => {
    <searchstack.Navigator>
        <searchstack.Screen name="Search" component={SearchScreen}/>
    </searchstack.Navigator>
}
const SearchScreen = () => {
    //..
}

const Search=（）=>{
}
const SearchScreen=（）=>{
//..
}

App.js-使用完整代码更新

import SearchFile from './Search';
import StatsFile from './Stats'

function HomeScreen() {
  return (
    <Tab.Navigator>
        <Tab.Screen name="TabA" component={SearchFile} />
        <Tab.Screen name="TabB" component={StatFila} />
    </Tab.Navigator>
  );
}
export default function App() {
  return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen}/>
          <Drawer.Screen name="Profile" component={Profile} />
          <Drawer.Screen name="Setting" component={Setting}/>
        </Drawer.Navigator>
      </NavigationContainer>
  )

从“./Search”导入搜索文件；
从“/Stats”导入StatsFile
功能主屏幕（）{
返回(
);
}
导出默认函数App（）{
返回(
)

我用完整的代码更新APP.js，我不知道如何将参数从搜索传递到statsFile，因此我必须将参数从内部StackNavigator传递到另一个StackNavigator，在同一个TabNavigator中定义。因此，从SearchStack我必须“向上”到选项卡，移动到Stat，然后再向下我更新了我的答案

这是在嵌套组件上导航的方式

    navigate('StatsStack', {
      screen: 'Stats',
      params: {
        foo: 'bar',
      },
    });

导入“反应本机手势处理程序”；
从“React”导入React；
从“react native”导入{按钮，文本}；
进口{
导航容器，
使用导航，
用户路由，
}来自'@react导航/native'；
从'@react navigation/stack'导入{createStackNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
常数{
屏幕：搜索屏幕，
导航器：SearchNavigator，
}=createStackNavigator（）；
常量搜索=（）=>{
const{navigate}=useNavigation（）；
常数goToStats=（）=>
导航（'statstack'{
屏幕：“统计数据”，
参数：{
福：“酒吧”，
},
});
返回；
};
const SearchStack=（）=>(
);
const{Screen:StatsScreen，Navigator:StatsNavigator}=createStackNavigator（）；
常量统计=（）=>{
const{params}=useRoute（）；
返回{params.foo}；
};
常量statstack=（）=>(
);
const Tab=createBottomTabNavigator（）；
常量应用=（）=>{
返回(
);
};
导出默认值（）=>(
);

当导航到统计屏幕时，是否要传递参数？是的，当我单击Search.js中的botton时，我想将参数传递到Stats.js使用上下文api或redux在用户之间共享状态component@vale1234ntina123复制并粘贴到你的

App.js

，告诉我它是否有效。

import 'react-native-gesture-handler';
import React from 'react';
import {Button, Text} from 'react-native';
import {
  NavigationContainer,
  useNavigation,
  useRoute,
} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const {
  Screen: SearchScreen,
  Navigator: SearchNavigator,
} = createStackNavigator();

const Search = () => {
  const {navigate} = useNavigation();

  const goToStats = () =>
    navigate('StatsStack', {
      screen: 'Stats',
      params: {
        foo: 'bar',
      },
    });

  return <Button onPress={goToStats} title="Go to stats" />;
};

const SearchStack = () => (
  <SearchNavigator>
    <SearchScreen component={Search} name="Search" />
  </SearchNavigator>
);

const {Screen: StatsScreen, Navigator: StatsNavigator} = createStackNavigator();

const Stats = () => {
  const {params} = useRoute();

  return <Text>{params.foo}</Text>;
};

const StatsStack = () => (
  <StatsNavigator>
    <StatsScreen component={Stats} name="Stats" />
  </StatsNavigator>
);

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen component={SearchStack} name="SearchStack" />
      <Tab.Screen component={StatsStack} name="StatsStack" />
    </Tab.Navigator>
  );
};

export default () => (
  <NavigationContainer>
    <App />
  </NavigationContainer>
);