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;

效果图如下:

相关推荐
独立开阀者_FwtCoder8 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士9 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明9 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201414 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius15 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku16 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄20 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙21 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员23 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特24 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范