自定義元件使用ANTD RN 中主題顏色的方式
阿新 • • 發佈：2019-09-28
render() {
return (
<WithTheme style={this.props.style} themeStyles={this.transformerTheme}>
{this.createNavigationBarWithTheme}
</WithTheme>
)
}
transformerTheme = (defaultTheme) => {
console.log("defaultTheme", defaultTheme)
return {
backgroundColor: defaultTheme.brand_primary,
textColor: defaultTheme.color_text_base_inverse
}
}
createNavigationBarWithTheme = (styleWithTheme) => {
console.log("styleWithTheme", styleWithTheme)
return <View style={styles.navBarWithStatusBarShape}>
{this.initStatusBar(styleWithTheme)}
{this.initNav(styleWithTheme)}
</View>
}
initNav = (styleWithTheme) => {
let titleView = this.props.titleView ? this.props.titleView :
<Text ellipsizeMode="tail" numberOfLines={1}
style={{color: styleWithTheme.textColor}}>{this.props.title}</Text>;
let content = this.props.hide ? null :
<View style={[styles.navBarShape, {backgroundColor: styleWithTheme.backgroundColor}]}>
{this.props.leftButton ? this.props.leftButton : this.getDefaultLeftButton(this.props.backPress)}
{titleView}
{this.props.rightButton}
</View>;
return content;
}