React native React Navigation v5身份验证流（屏幕显示为不同的文件）

如果我们在文档示例中看到：

函数符号屏幕（）{
const[username，setUsername]=React.useState（“”）；
const[password，setPassword]=React.useState（“”）；
const{signIn}=React.useContext（AuthContext）；/？？？？
返回(
登录（{username，password}）}/>
);
}

---

标志屏幕

位于同一App.js中。如果我们将

signnscreen

作为新文件signnscreen.js发布，如何从signnscreen.js发送

signIn

？

您必须为

signnscreen

//App.js
从“…”导入符号筛选
//导出上下文
export const AuthContext=React.createContext（）；
导出默认函数App（）{
//…一些引导代码
// https://reactnavigation.org/docs/auth-flow/#implement-用于恢复令牌的逻辑
const authContext=React.useMoom(
() => ({
签名：异步（数据）=>{…}，
}),
[]
);
返回(
);
}

从“/App.js”导入{AuthContext}
函数符号屏幕（）{
//必须是AuthContext.Provider的子级
const{signIn}=React.useContext（AuthContext）；
返回(
...
);
}

我的意思是SignInScreen是外部文件，并导入到App.js中。SignInScreen已经是

AuthContext.Provider

的子级，但我不确定如何访问SignInScreen.js中的同一AuthContext？我不理解这个问题，如果它是一个外部文件为什么重要？只需导入并呈现它您的意思是如何访问相同的

AuthContext

？只需导出它，我将添加一个示例是的，AuthContext未定义。Tia.@JeafGilbert参见示例，导出上下文并将其导入作为提供程序子组件的每个组件中

function SignInScreen() {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');

  const { signIn } = React.useContext(AuthContext); // ????

  return (
    <View>
      <TextInput
        placeholder="Username"
        value={username}
        onChangeText={setUsername}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Sign in" onPress={() => signIn({ username, password })} />
    </View>
  );
}