React Native 文本输入基础知识




import React, { useState } from 'react';
import { Text, View, TextInput } from 'react-native';
 
const App = () => {
  const [text, setText] = useState(''); // 使用 useState 钩子管理输入的文本状态
 
  return (
    <View style={{ padding: 10 }}>
      <TextInput
        style={{ height: 40 }}
        placeholder="输入一些文本"
        onChangeText={setText} // 当文本变化时调用 setText 函数
        value={text} // 设置文本框的当前值为 text 状态
      />
      <Text>输入的文本是: {text}</Text>
    </View>
  );
};
 
export default App;

这段代码展示了如何在React Native应用中创建一个简单的文本输入组件，并在用户输入时实时更新显示的文本。它使用了React的useState钩子来管理组件的状态，这是React 16.8以后引入的一个新特性，简化了状态管理。

React Native 文本输入基础知识

评论已关闭

推荐阅读