React 尝试使用 textinput 但什么也没出现

问题描述

我正在努力解决这个问题：https://callstack.github.io/react-native-paper/2.0/text-input.html 但它不会出现。我没有错误，但什么也看不见：我有一个空白。 我认为这是因为我不使用类，但我不想使用 is here。

import React,{ useState } from 'react';
import { StyleSheet,TextInput,View,Text,Button,Image } from 'react-native';
import { login } from '../api/mock';
import EmailForm from '../forms/EmailForm';
import mainlogo from '../../assets/juliette.jpg';

const LoginScreen = ({ navigation }) => {
  state = {
    text: ''
  };
  return (
    <View style={styles.main_container}>
        <Image style={styles.image} source={mainlogo} />
        <TextInput
        label='Email'
        value={this.state.text}
        onChangeText={text => this.setState({ text })}
        />
        <EmailForm buttonText="Se connecter" onSubmit={login} onAuthentication={() => navigation.navigate('Home')}>

        <Button style={styles.button} title="Créer un compte" onPress={() => navigation.navigate('CreateAccount')}/>
      </EmailForm>
    </View>
  );
};


const styles = StyleSheet.create({
  main_container: {
    flex: 1,marginTop: 50,justifyContent: 'center',marginHorizontal: 16
  },textinput: {
    marginLeft: 5,marginRight: 5,height: 50,borderColor: '#000000',borderWidth: 1,paddingLeft: 5
  },image: {
    marginLeft:50,height: 300,width: 300
  },button: {
      flex: 2,flexDirection: 'column',alignItems: 'center',borderBottomWidth: StyleSheet.hairlinewidth
  },})

export default LoginScreen;

感谢您的提前

解决方法

当您使用功能组件时，您必须像下面这样管理状态

const LoginScreen = ({ navigation }) => {
  //The hook should be used here
  const [text,setText]=useState('');
  return (
    <View style={styles.main_container}>
        <Image style={styles.image} source={mainLogo} />
        <TextInput
        label='Email'
        value={text}
        onChangeText={text => setText(text)}
        placeholder="Enter text"
        />
        <EmailForm buttonText="Se connecter" onSubmit={login} onAuthentication={() => navigation.navigate('Home')}>

        <Button style={styles.button} title="Créer un compte" onPress={() => navigation.navigate('CreateAccount')}/>
      </EmailForm>
    </View>
  );
};