前一篇文章介绍了React Native实现Tab+ViewPager效果,这篇文章讲一下我在对上一篇文章的代码进行注释时遇到的问题。加注释出问题的代码如下:
//标题栏
① <View style = {styles.container}>
②<View style = {styles.headerView}><Text style = {styles.textHeaderStyle}>Header</Text>
</View>
//Tab栏
<ScrollableTabView
style={styles.pagerView}
renderTabBar={() => <DefaultTabBar />}//默认样式,Tab栏不可滑动
tabBarUnderlineStyle={styles.lineStyle}//下划线
tabBarActiveTextColor='#FF0000'>
<MyFlatList //列表项
tabLabel = {dataSource1.tab}
dataSource = {dataSource1}
renderItem = {({item}) =>
<TouchableNativeFeedback //点击事件
onPress = {this.onPress.bind(this,item)}>
<Text style = {styles.textMainStyle}>{item.key}</Text>
</TouchableNativeFeedback>
}
/>
。。。
原来没加注释是可以正常运行的,但是加了注释之后,会出现如下错误:
这我就很奇怪,为什么加了注释之后会报错。仔细排查发现:
>后使用 // 作为注释要注意,注释内容必须不在任何html标签里,否则会当成要显示的文本内容
例如上面的//Tab栏虽然在②的外,但是仍在①的内,会被当做要显示的文本,从而报错。这时候注释要用{/* 一般注释, 用 {} 包围 */}
react native里是用JSX语言,JS和html结合,所有注释方式如下:
var content = (
<Nav>
{/* 一般注释, 用 {} 包围 */}
<Person
/* 多
行
注释 */
name={window.isLoggedIn ? window.name : ''} // 行尾注释
/>
</Nav>
);
总结一下,>后注释一般用 {/* */},如果不在任何标签内,可以用 //, } 后注释用 //