React Native 中创建 Android 原生模块并展示 TextView 的步骤

回答：

在 React Native 中创建一个 Android 原生模块并展示一个 TextView 需要几个步骤。以下是一个简单的例子，展示如何在 React Native 中创建一个 Android 原生模块并使用 TextView。

1. 创建原生模块

首先，确保你已经设置好 React Native 开发环境，并且已经创建了一个 React Native 项目。

1.1 创建 Java 类

在你的 Android 项目中，创建一��新的 Java 类来定义你的原生模块。例如，创建一个名为 MyTextViewManager.java 的文件。

package com.yourapp;

import android.widget.TextView;
import android.view.ViewGroup.LayoutParams;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

public class MyTextViewManager extends SimpleViewManager<TextView> {

    public static final String REACT_CLASS = "MyTextView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected TextView createViewInstance(ThemedReactContext reactContext) {
        TextView textView = new TextView(reactContext);
        textView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        return textView;
    }

    @ReactProp(name = "text")
    public void setText(TextView view, String text) {
        view.setText(text);
    }
}

1.2 注册模块

接下来，创建一个 MyPackage.java 文件来注册你的模块。

package com.yourapp;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return new ArrayList<>();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        List<ViewManager> viewManagers = new ArrayList<>();
        viewManagers.add(new MyTextViewManager());
        return viewManagers;
    }
}

1.3 修改 `MainApplication.java`

在 MainApplication.java 中注册你的包。

import com.yourapp.MyPackage; // 添加这一行

public class MainApplication extends Application implements ReactApplication {

    // 其他代码...

    @Override
    protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
        packages.add(new MyPackage()); // 添加这一行
        return packages;
    }

    // 其他代码...
}

2. 在 JavaScript 中使用原生模块

现在，你可以在 JavaScript 中使用你创建的原生模块了。

2.1 创建 JavaScript 组件

在你的 React Native 项目中，创建一个 JavaScript 文件来使用这个原生模块。例如，创建一个名为 MyTextView.js 的文件。

import { requireNativeComponent } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';

const MyTextView = requireNativeComponent('MyTextView');

const MyTextViewComponent = ({ text }) => {
  return <MyTextView text={text} style={{ width: 200, height: 50 }} />;
};

MyTextViewComponent.propTypes = {
  text: PropTypes.string,
};

export default MyTextViewComponent;

2.2 使用组件

在你的主应用文件中使用这个组件。例如，在 App.js 中：

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import MyTextViewComponent from './MyTextView';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <MyTextViewComponent text="Hello, World!" />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

3. 运行应用

确保你已经启动了 Android 模拟器或连接了 Android 设备，然后运行你的 React Native 应用：

npx react-native run-android

这样，你就可以在 React Native 应用中看到一个显示 "Hello, World!" 的 TextView 了。