如何在React Native中从不同屏幕访问道具数据

Question

React Native的新手，并试图找出从另一个屏幕访问道具的正确方法
我在网上找到的大多数答案都非常不同，所以我想知道是否有推荐的方法。

App.js-此处user是当前连接的用户数据。

{ user ? (
<Stack.Screen name="Home">
{props => <HomeScreen {...props} extraData={user} />}
</Stack.Screen>
) : (...)
}

在其他屏幕上，我以这种方式将用户发送到HomeScreen：

navigation.navigate('Home', {user: user})

HomeScreen.js-在这个功能中，我想从App.js或sends用户的任何其他屏幕访问用户的数据。

export default function HomeScreen(props, {navigation}) {...}

我应该如何在HomeScreen.js中构建代码以正确接收用户？

Answer 1

我建议使用Context API，有关它的文档可以在这里找到

下面是一个用法示例：

创建用户详细信息的提供者

// Import createContext from react
import {createContext} from 'react'
// Create a context that holds a user and a function to change the user details
export const UserContext = createContext({user: null, setUser: (user) => {}})

将包含主屏幕的主导航器与UserContext中的提供者包装在一起

function MainNavigator() {
// For state management, useState for the user
const [user, setUser] = useState(null)
return (
// Pass the user and setUser inside the Provider value for consumption
<UserContext.Provider value={{user, setUser}}>
<YourNavigator>
{ /* Your screen */ }
<Stack.Screen name="home" component={HomeScreen} />
</YourNavigator>
</UserContext.Provider>
)
}

使用一个简单的挂钩在HomeScreen组件中使用上下文

import { useContext } from 'react'
import { UserContext } from '../where/your/provider/is'
export default function HomeScreen(props) {
// Consume the context!
const { user, setUser } = useContext(UserContext)
return <>{ /* Your screen layout */}</>
}

这只是这个特定用例的一个简单示例，我建议学习更多关于Context API的知识并使用它

希望你能找到这个有用的