在底部中心反应原生组件 - Javascript

在React Native中，我们可以使用原生组件来替代React组件的一些功能，例如在高性能的场景下，使用原生组件可以提升应用的性能。

在本文中，我们将学习如何使用原生组件在底部中心创建一个可响应的视图。

步骤1 - 导入原生组件

首先，我们需要在我们的组件中导入原生组件。React Native中提供了许多原生组件，我们可以在官方文档中找到它们的名称。

我们将导入View和NativeModules组件：

import { View, NativeModules } from 'react-native';

步骤2 - 创建原生组件

接下来，我们将创建一个原生组件来处理我们的视图。我们需要在android/app/src/main/java/com/[project name]/MainActivity.java文件中创建一个新的原生组件。

package com.[project name];

import android.view.View;

public class BottomCenterView extends View {
    public BottomCenterView(Context context) {
        super(context);
    }
}

步骤3 - 暴露原生组件

我们需要将我们创建的原生组件暴露给Javascript层。我们可以使用@ReactProp注释来实现这一点。

package com.[project name];

import android.view.View;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

public class BottomCenterViewManager extends SimpleViewManager<View> {
    public static final String REACT_CLASS = "RCTBottomCenterView";

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

    @Override
    protected View createViewInstance(ThemedReactContext themedReactContext) {
        return new BottomCenterView(themedReactContext);
    }

    @ReactProp(name = "backgroundColor")
    public void setBackgroundColor(BottomCenterView view, String backgroundColor) {
        view.setBackgroundColor(Color.parseColor(backgroundColor));
    }
}

在我们的原生组件管理者中，我们使用createInstance方法创建BottomCenterView实例并返回。

我们使用@ReactProp注释来向Javascript层暴露设置backgroundColor属性的方法。

步骤4 - 注册原生组件

我们需要在应用程序的getPackages方法中注册我们的原生组件。

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.asList(
        new MainReactPackage(),
        new BottomCenterViewPackage()
    );
}

BottomCenterViewPackage类如下所示：

package com.[project name];

import java.util.Arrays;
import java.util.List;

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

public class BottomCenterViewPackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.asList(
            new BottomCenterViewManager()
        );
    }

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

我们使用createViewManagers方法将我们的原生组件管理者添加到React Native中。

步骤5 - 创建React组件

在我们的React组件中，我们可以使用BottomCenterView组件来显示视图。

import { requireNativeComponent } from 'react-native';

const BottomCenteredView = requireNativeComponent('RCTBottomCenterView');

export default function App() {
  return (
    <View style={styles.container}>
      <BottomCenteredView
        style={styles.bottomCenteredView}
        backgroundColor="#333333"
      />
    </View>
  );
}

在我们的React组件中，我们可以使用requireNativeComponent方法来引入我们创建的原生组件。

步骤6 - 样式

我们将在底部中心显示视图，因此需要使用绝对定位和负边距来居中视图。

我们的样式如下所示：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottomCenteredView: {
    position: 'absolute',
    bottom: 0,
    width: 100,
    height: 100,
    borderRadius: 50,
    marginTop: -50,
    backgroundColor: 'red',
  },
});

完整代码

下面是完整的代码：

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

const BottomCenteredView = requireNativeComponent('RCTBottomCenterView');

export default function App() {
  return (
    <View style={styles.container}>
      <BottomCenteredView
        style={styles.bottomCenteredView}
        backgroundColor="#333333"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottomCenteredView: {
    position: 'absolute',
    bottom: 0,
    width: 100,
    height: 100,
    borderRadius: 50,
    marginTop: -50,
    backgroundColor: 'red',
  },
});

结论

在本文中，我们学习了如何在React Native应用程序中使用原生组件。我们创建了一个底部中心的视图，并在React组件中使用它。通过使用原生组件，我们可以在高性能的场景下提升React Native应用程序的性能。