一、实现自定义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;
效果图如下: