React尝试使用文本输入，但没有显示任何内容

Question

我正试图把这件事落实到位：https://callstack.github.io/react-native-paper/2.0/text-input.html但它并没有出现。我没有错误，但什么都看不见：我得到了一个空白。我想这是因为我没有使用类，但我不想在这里使用它。

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