大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率。
标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要。今天先讲一个不带返回按钮的标题栏。废话少说,直接上代码:
/* *
*封装公共的标题头,没有返回按钮
*/使用严格的;
进口的反应,从“反应”{组件};
进口{
文本,
看来,
}
从“react-native”;
导入样式表的样式表;
出口的默认类HeaderNoBack扩展组件{
呈现(){
回报(
& lt;视图风格={styles.container}比;
& lt;视图风格={styles.textview}比;
& lt;文本样式={styles.textstyle}在{this.props。文本| |”标题头”}& lt;/Text>
& lt;/View>
& lt;/View>
);
}
}
const风格=StyleSheet.create ({
容器:{
flexDirection:“行”,
alignItems:“中心”,
高度:45岁
alignSelf:“拉伸”,
写成backgroundColor:“# 4 a9df8”,
}，
textview: {
flex: 1、
alignSelf:“中心”,
}，
textstyle: {
字形大小:18,
颜色:# fff,
textAlign:“中心”,
}，
});之前
代码比较简单,这里就做过多的分析了,但是着重说一点,this.props.text这里是显示传入进来的要显示的文本,如果没有传入文本属性,则默认显示“标题头”。
使用方法示例:
进口HeaderNoBack从“. ./. ./. ./组件/头/HeaderNoBack”;
& lt; HeaderNoBack文本='我是标题”/比;之前
以上代码主要用到了视图和文本组件,样式使用了flex布的局,有不了解felx布局的可以看下阮一峰的一篇文章:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html& # 63; utm_source=tuicool
当然,网上资料很多,也可以自己搜索,上面只是代码示例,在实际项目中要根据自己的情况进行修改。
好了,今天先讲到这里,后面部分会讲解带返回按钮的标题栏的实现。
以上所述是小编给大家介绍的反应本地自定义标题栏组件的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
