Home > Web Front-end > JS Tutorial > body text

How to annotate code in react native

青灯夜游
Release: 2020-12-21 17:07:07
Original
3442 people have browsed it

How to comment code in react native: 1. Within the HTML tag node, use "{/* */}" to comment; 2. Outside the HTML tag node, use "/**/" to comment, a single line can be commented with "//".

How to annotate code in react native

The operating environment of this tutorial: windows7 system, react native0.6&&react16 version, this method is applicable Suitable for all brands of computers.

Recommended related tutorials: React video tutorial

React Native comments are too particular, errors are reported frequently, and they are not smart. Here is a summary of the comments .

Problem presentation

The code is as follows:

        //标题栏
        ① <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>
          }
          />
Copy after login

It runs normally before adding comments. After adding comments, various reports are reported. Error.
It’s very strange. After investigation, we found:

>. Please note that when using // as a comment, the comment content must not be in any html tag, otherwise it will be regarded as the text content to be displayed.

For example, although the //Tab bar above is outside ②, it is still inside ①. It will be regarded as the text to be displayed, and an error will be reported. At this time, the comment should be {/* General comment , surrounded by {}" for multiple lines */}

#react native uses JSX language, combining JS and html. All comments are as follows:

var content = (
  <Nav>
    {/* 一般注释, 用 {} 包围 */}
    <Person
      /* 多
         行
         注释 */
      name={window.isLoggedIn ? window.name : &#39;&#39;} // 行尾注释
    />
  </Nav>
);
Copy after login

Add comments in JSX Easily they are just JS expressions. You just need to surround the part to be commented with {} within the child nodes of a tag (not the outermost).

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

Comment outside the tag node and The usual comments are the same, use "/**/", use "//" for a single line.

Note:

When using // as a comment, please note that the comment content must not be in any html tag, otherwise it will be regarded as The text content to be displayed

comments are generally {/**/} for multiple lines. If it is not within any tag, you can use //, } followed by comments //

More programming related knowledge, Please visit: Introduction to Programming! !

The above is the detailed content of How to annotate code in react native. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template