React 尝试使用文本输入但没有出现

Question

我正在尝试将这件事落实到位：https://callstack.github.io/react-native-paper/2.0/text-input.html 但它没有出现。我没有错误，但没有任何东西是可见的：我有一个空白。我认为这是因为我不使用 class，但我不想在这里使用。

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',
      justifyContent: 'center',
      alignItems: 'center',
      borderBottomWidth: StyleSheet.hairlineWidth
  },
})

export default LoginScreen;

谢谢你的提前

Answer 1

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

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

React 尝试使用文本输入但没有出现

React try to use a textinput but nothing appears

reactjs

react-native

import

react-redux

blank-line