React Native - 文本

React Native 提供了多种组件用于呈现文本。在本文中，我们将介绍 React Native 中常用的文本组件，包括 Text、TextInput 和 WebView。

Text

Text 组件用于呈现一段纯文本。可以设置文本样式，例如字体大小、颜色和对齐方式。示例代码如下：

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    color: 'black',
    textAlign: 'center',
  },
});

function App() {
  return (
    <Text style={styles.text}>Hello, World!</Text>
  );
}

其中，fontSize、color 和 textAlign 都是 Text 组件的样式属性，可以通过 StyleSheet 对象进行统一定义。在代码中，我们将样式定义为了 styles.text，并将其传递给了 Text 组件。

TextInput

TextInput 组件用于获取用户输入的文本。可以设置输入框样式、占位符、返回键类型等属性。使用时需要监听输入框的 onChangeText 事件，以获取用户输入内容。示例代码如下：

import React, { useState } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingLeft: 10,
    paddingRight: 10,
  },
});

function App() {
  const [value, onChangeText] = useState('');

  return (
    <TextInput
      style={styles.input}
      onChangeText={text => onChangeText(text)}
      value={value}
      placeholder="请输入文本"
    />
  );
}

其中，height、borderColor、borderWidth 等都是 TextInput 组件的样式属性，可以通过 StyleSheet 对象进行统一定义。onChangeText 事件会将用户输入的文本传递给回调函数 onChangeText，在示例代码中，我们使用 useState 钩子来获取用户输入的文本，并将其渲染在页面中。

WebView

WebView 组件用于在应用程序中呈现网页。可以使用 WebView 加载本地 HTML 文件或远程 URL，并对页面进行操作。WebView 可以监听网页加载状态、页面导航等事件。示例代码如下：

import React from 'react';
import { WebView } from 'react-native-webview';

function App() {
  return (
    <WebView
      source={{ uri: 'https://www.baidu.com' }}
      style={{ marginTop: 20 }}
    />
  );
}

其中，source 属性用于指定网页的来源，可以是一个 uri、一个 require 引入的本地 HTML 文件、或一个包含 uri 和其他属性的对象。在示例代码中，我们使用 uri 属性指定 WebView 加载的网页地址，并且设置了 style 属性，将 WebView 指定在页面顶部（marginTop: 20）。

以上就是 React Native 中常用的文本组件的介绍。通过 Text、TextInput 和 WebView，我们可以很方便地在应用程序中呈现文本、监听用户输入和操作网页。