React Native，在选项卡导航器中按下选项卡时如何将参数传递到屏幕？答案

【问题标题】：React Native, how do I pass params to a screen when pressing the tab in a tab navigator?React Native，在选项卡导航器中按下选项卡时如何将参数传递到屏幕？
【发布时间】：2020-11-19 23:20:19
【问题描述】：

我有一个使用堆栈导航器的功能，其中有一个嵌套的选项卡导航器。在“ConnectScreen”上获得代码后，我想将代码传递给选项卡导航器内的“FeedScreen”。该代码可作为 Home 函数中的 route.params.code 访问。然后我想将代码传递给 FeedScreen。

function ConnectScreen({ navigation, route }) {
  const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: 'xxx',
      scopes: [
        "user-top-read",
        "user-read-currently-playing",
        "user-read-playback-state",
        "user-modify-playback-state",
      ],
      usePKCE: false,
      redirectUri: makeRedirectUri({
        native: 'your.app://redirect',
      }),
    },
    discovery
  );

  const [state, setState] = React.useState({
    token: null
  })

  React.useEffect(() => {
    if (response?.type === 'success') {  
      var clientId = 'xxx'
      var clientSecret = 'xxx'
      var credsB64 = btoa(`${clientId}:${clientSecret}`)
      var accessCode = response.params.code
      var redirectUri = "xxx"
      }
      const tokenResponse = fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
          Authorization: `Basic ${credsB64}`,
        },
        body: `grant_type=authorization_code&code=${accessCode}&redirect_uri=${redirectUri}`,
      }).then((response) => response.json())
      .then((responseJSON) => {
        if (responseJSON.access_token) {
          var token = responseJSON.access_token
          setState({
            token: token
          })
        }

      })
  }, [response]);

  return (
    <View style={styles.container}>
     <Button
      disabled={!request}
      title="Connect to Spotify"
      onPress={() => {
        promptAsync()
        }}
     />
     <Button
        title="Home"
        onPress={() =>
          navigation.navigate('Home', {
            screen: 'FeedScreen',
            params: {
              code: state.token,
            }
          })
        }
      />
    </View>
  );
}

class FeedScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const HomeTab = createBottomTabNavigator();

function Home({ route}) {
  console.log("HOME TAB ROUTE",route.params.code)
  return (
    <HomeTab.Navigator>
      <HomeTab.Screen name= "Feed" component={FeedScreen} />
      <HomeTab.Screen name= "Player" component={PlayerScreen} />
      <HomeTab.Screen name= "Search" component={SearchScreen} />
    </HomeTab.Navigator>
  )
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Splash"
          component={SplashScreen}
        />
        <Stack.Screen
          name="Login"
          component={LoginScreen}
        />
        <Stack.Screen
          name="Connect"
          component={ConnectScreen}
        />
        <Stack.Screen
          name="Home"
          component={Home}
        />
      </Stack.Navigator>
    </NavigationContainer>

【问题讨论】：

标签： javascript react-native expo react-navigation react-native-tabnavigator

【解决方案1】：

您可以直接从 ConnectScreen 导航到 FeedScreen

navigation.navigate('Home', { screen: 'FeedScreen ', params: {code: yourCode} });

【讨论】：

【解决方案2】：

试试这个方法

<HomeTab.Screen name="home" children={()=><ComponentName propName={propValue}/>} />

【讨论】：

【解决方案3】：

您可以结帐react-navigation 进行导航操作。基本上，您可以为基于堆栈和导航的特定操作创建特定方法。

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Welcome' }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

您可以找到 StackActions：StackActions

您可以找到 NavigationActions：NavigationActions

我更喜欢 NavigationService.js 文件来导航和管理堆栈。

// NavigationService.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

【讨论】：