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

Question

我有一个使用堆栈导航器的函数，其中有一个嵌套的选项卡导航器。在获得"；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>

Answer 1

您可以直接从ConnectScreen 导航到FeedScreen

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

Answer 2

尝试这种方式

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

Answer 3

您可以为导航操作签出反应导航。基本上，您可以为基于Stack和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,
};