将 props 从根组件传递到 AppNavigator
Pass props from the root component to AppNavigator
我在 App 根组件中有一个 AppNavigator。我需要更改 AppNavigator 中的 initialRouteName 取决于根组件的道具。在用户登录时的根组件中,我将凭据保存在钥匙串中。我需要这样做:
用户登录?主屏幕:AuthScreen
你能告诉我如何将根 App 组件的 userLoggedIn 道具发送到 AppNavigator 吗?
App.js:
import React, { useState, useEffect } from 'react'
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
import { InMemoryCache } from 'apollo-cache-inmemory'
import * as Keychain from 'react-native-keychain'
import AppNavigator from './AppNavigator'
const httpLink = createHttpLink({
uri: 'http://localhost:4000'
})
const authLink = setContext(async (_, { headers }) => {
const tokens = await Keychain.getGenericPassword()
const accessToken = tokens.accessToken
return {
headers: {
...headers,
authorization: accessToken ? `Bearer ${accessToken}` : ''
}
}
})
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
connectToDevTools: true
})
const App = () => {
const [loggedIn, setLoggedIn] = useState(false)
useEffect(async () => {
const tokens = await Keychain.getGenericPassword()
const accessToken = tokens.accessToken
if (accessToken) {
setLoggedIn(true)
}
})
return (
<ApolloProvider client={client}>
<ApolloHooksProvider client={client}>
<AppNavigator userLoggedIn={loggedIn} />
</ApolloHooksProvider>
</ApolloProvider>
)
}
export default App
AppNavigator.js:
import { createStackNavigator, createAppContainer } from 'react-navigation'
import { HomeScreen, AuthScreen } from './screens'
const AppNavigator = createStackNavigator(
{
AUTH_SCREEN: AuthScreen,
HOME: HomeScreen
},
{
initialRouteName: 'AUTH_SCREEN',
headerMode: 'none'
}
)
export default createAppContainer(AppNavigator)
我在 App 根组件中有一个 AppNavigator。我需要更改 AppNavigator 中的 initialRouteName 取决于根组件的道具。在用户登录时的根组件中,我将凭据保存在钥匙串中。我需要这样做: 用户登录?主屏幕:AuthScreen 你能告诉我如何将根 App 组件的 userLoggedIn 道具发送到 AppNavigator 吗?
App.js:
import React, { useState, useEffect } from 'react'
import { ApolloProvider } from 'react-apollo'
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
import { InMemoryCache } from 'apollo-cache-inmemory'
import * as Keychain from 'react-native-keychain'
import AppNavigator from './AppNavigator'
const httpLink = createHttpLink({
uri: 'http://localhost:4000'
})
const authLink = setContext(async (_, { headers }) => {
const tokens = await Keychain.getGenericPassword()
const accessToken = tokens.accessToken
return {
headers: {
...headers,
authorization: accessToken ? `Bearer ${accessToken}` : ''
}
}
})
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
connectToDevTools: true
})
const App = () => {
const [loggedIn, setLoggedIn] = useState(false)
useEffect(async () => {
const tokens = await Keychain.getGenericPassword()
const accessToken = tokens.accessToken
if (accessToken) {
setLoggedIn(true)
}
})
return (
<ApolloProvider client={client}>
<ApolloHooksProvider client={client}>
<AppNavigator userLoggedIn={loggedIn} />
</ApolloHooksProvider>
</ApolloProvider>
)
}
export default App
AppNavigator.js:
import { createStackNavigator, createAppContainer } from 'react-navigation'
import { HomeScreen, AuthScreen } from './screens'
const AppNavigator = createStackNavigator(
{
AUTH_SCREEN: AuthScreen,
HOME: HomeScreen
},
{
initialRouteName: 'AUTH_SCREEN',
headerMode: 'none'
}
)
export default createAppContainer(AppNavigator)