Блог

У меня есть функция, использующая навигатор стека, а внутри нее находится вложенный навигатор вкладок. После получения кода на «ConnectScreen» я хочу передать код в «FeedScreen» внутри навигатора вкладок. Код доступен как 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_codeamp;code=${accessCode}amp;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>
 

Вы можете перейти к FeedScreen непосредственно из ConnectScreen

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

Попробуйте этот способ

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

Вы можете проверить 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,
};