Question

React（和本机）的新手，我正在尝试修改this working Snack。我正在尝试将SignInScreen移至其自己的文件，并从默认的App文件中调用它，这是我的SignInScreen文件，其中发生了错误：

import * as React from 'react';
import { Button, View, TextInput } from 'react-native';

const context = React.createContext();

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

  console.log(context);

  const {signIn} = React.useContext(context); //blows up here

  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>
  );
}

通过<Stack.Screen name="SignIn" component={SignInScreen}>致电

我遇到错误：

无法读取SignInScreen上未定义的属性“ signIn”

我假设这只是我不了解的封装（或语法或范围）问题。

Answer 1

您需要提供signIn函数的实现。您可以在调用createContext时执行此操作，也可以将其作为该上下文的Provider值传递下来（假设您有一个，否则是另一个问题）。

const context = createContext({
    signIn : ({ username, password }) => {
        console.log(username, password);
    }
});

我建议您稍微读一下docs。

React Native屏幕尝试导出功能

1 个答案: