import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';
const App = () => {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (text) => {
setInputValue(text);
};
return (
<View style={styles.container}>
<Text>输入的文本: {inputValue}</Text>
<TextInput
style={styles.input}
placeholder="在这里输入文本"
onChangeText={handleInputChange}
value={inputValue}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10,
paddingHorizontal: 10,
},
});
export default App;
在这个例子中,我们使用了 TextInput 组件,并通过 placeholder 属性设置了一个提示文本。onChangeText 属性用于指定文本输入变化时的回调函数,通过这个回调,我们可以更新状态(inputValue),以反映用户输入的文本。
注意,我们使用了 useState 钩子来创建一个状态变量 inputValue,并在 handleInputChange 回调中更新它。
你可以根据需要自定义样式、添加更多的输入框属性以及处理文本输入的逻辑。
转载请注明出处:http://www.pingtaimeng.com/article/detail/9477/React Native