Question

我想将参数从Search.js传递给Stats.js 导航器的结构如下：

Search.js

const Search = () => {
    <searchstack.Navigator>
        <searchstack.Screen name="Search" component={SearchScreen}/>
    </searchstack.Navigator>
}
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>
  )

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

Answer 1

我更新了答案。

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

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

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

嵌套导航react-native中的传递参数

1 个答案: