React Native组件篇 — TextInput组件

import React, { useState } from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
 
const App = () => {
  const [text, setText] = useState('');
 
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type here..."
        onChangeText={setText}
        value={text}
      />
      <Text style={styles.text}>{text}</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 10,
  },
  input: {
    margin: 10,
    padding: 10,
    fontSize: 16,
  },
  text: {
    margin: 10,
    padding: 10,
    fontSize: 16,
  },
});
 
export default App;

这段代码展示了如何使用React Native的TextInput组件来创建一个简单的文本输入框，并将输入的文本实时显示在屏幕上。它使用了Hooks API中的useState来管理输入的状态，并展示了如何使用onChangeText和value属性来处理输入数据的双向绑定。