React Native自定义View(Android侧)

一、实现自定义View

kotlin 复制代码
@SuppressLint("SetTextI18n")
class BlankPlaceholder(context: Context): FrameLayout(context) {

    init {
        addView(
            TextView(context).apply {
                setTextColor(Color.WHITE)
                text = "I am blank placeholder"
                gravity = Gravity.CENTER
            },
            LayoutParams(
                LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT
            )
        )
    }

}

二、实现并注册自定义的SimpleViewManager

实现SimpleViewManager用于封装自定义View并提供属性方法

kotlin 复制代码
class BlankPlaceholderViewManager: SimpleViewManager<View>() {

    override fun createViewInstance(reactContext: ThemedReactContext): View {
        return BlankPlaceholder(reactContext).apply {
            setBackgroundColor(Color.RED)
        }
    }

    override fun getName(): String = "BlankPlaceholder"

    @ReactProp(name = "bgColor")
    fun setPlaceholderBg(view: View, color: String) {
        view.setBackgroundColor(color.toColorInt())
    }
}

实现ReactPackage,用于暴露原生模块或者原生View

kotlin 复制代码
class CustomNativePackage: ReactPackage {
    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        return emptyList()
    }

    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<in Nothing, in Nothing>> {
        return arrayListOf(
            BlankPlaceholderViewManager()
        )
    }
}

向注册ReactNativeHost注册ReactPackage

kotlin 复制代码
override val reactNativeHost: ReactNativeHost =
    object : DefaultReactNativeHost(this) {
      override fun getPackages(): List<ReactPackage> =
          PackageList(this).packages.apply {
            // Packages that cannot be autolinked yet can be added manually here, for example:
             add(CustomNativePackage())
          }

      override fun getJSMainModuleName(): String = "index"

      override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

      override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
      override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
    }

三、在React Native中使用

根据设置的名称读取ViewManager并暴露给其他模块文件使用

js 复制代码
import { requireNativeComponent } from "react-native";

const BlankPlaceholder = requireNativeComponent('BlankPlaceholder');

export default BlankPlaceholder;

示例代码如下

js 复制代码
import { SafeAreaView, StatusBar, StyleSheet, Text } from "react-native";
import BlankPlaceholder from "../components/BlankPlaceholder";

const InitPage = () => {
    const name = "EANAM"
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.centerText}>Hello, {name}</Text>
            <BlankPlaceholder style={styles.placeholder} bgColor={'green'}/>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        paddingTop: StatusBar.currentHeight,
        flexDirection: 'column'
    },  
    centerText: {
        textAlign: 'center'
    },
    placeholder: {
        width: '100%',
        height: 100,
    }
})

export default InitPage;

效果图如下:

相关推荐
comelong3 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹5 分钟前
硬件产品研发管理工具实战指南
前端·python
用户3802258598246 分钟前
vue3源码解析:依赖收集
前端·vue.js
WaiterL6 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason9 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7789 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽28 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟29 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦29 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子30 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试