react native怎么注释代码-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

react native注释代码的方法：1、HTML标签节点内，使用“{/* */}”进行注释；2、HTML标签节点外，多行可以用“/**/”进行注释，单行可以用“//”进行注释。

本教程操作环境：windows7系统、react native0.6&&react16版本，该方法适用于所有品牌电脑。

相关教程推荐：React视频教程

React Native 注释太讲究，动不动就报错，而且很不智能。这里对注释总结一下。

问题呈现

代码如下：

//标题栏
① <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>
);

JSX 里添加注释很容易它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。

class ReactDemo extends Component {
  render() {
    return (      <View style={styles.container}>
        {/*标签子节点的注释*/}
        <Text style={styles.welcome}
          //textAlign='right'
          textShadowColor='yellow'
          /*color='red'
          textShadowRadius='1'*/
          >
          React Native!        </Text>
      </View>
    );
  }
}