【React Native】React基础（二）

一、React JSX基础

1、React.js和React Native关系

     

2、React Native原理

     

3、借鉴XHTML的一些规则/规范

（1）开始结束标签配对

     <组件>ooxx</组件>

（2）无内容组件标签写为自封闭形式

     <组件/>

（3）自定义属性，字符串应使用双引号，其他值用{}括起来

<Person age={30} sex='male' married={true}/>

4、注意事项

（1）必须单一子节点

（2）空值自动忽略

 

（3）显示和隐藏组件

（4）组件必须大写字母开头

（5）文本必须写在Text组件内

     【1】<View>React Native中文网</View>

     【2】<View></View>

（6）注释写法比较特殊

（7）只能嵌入表达式，不能是语句

二、初识React组件化开发

1、class/function都可以是“积木”（组件）

     （1）class

     class GoodMorning extends Component {

          render() {

               return (

                    <Text>Good Morning!</Text>

               );

          }

     }

     （2）function无状态组件

     const GoodMorning=()=>{

          return (

               <Text>Good evening</Text>

          );

     }

2、使用props定制“积木”（组件）

     （1）class

          class GoodMorning extends Component {

               static defaultProps={

                    name: 'someBody',

               };

               static propTypes={

                    name：React.propTypes.string,  //约定需要的类型

               };

               render() {

                    return(

                         <Text>{this.props.name}</Text>

                    );

               }

          }

     （2）function无状态组件

          const GoodEvening=(props)=> {

               return (

                    <Text>{props.name}</Text>

               );

          }

3、class内成员变量写法

4、动态列表与key

（1）根据数组动态生成多个组件一般使用map方法

          注意，箭头函数的返回值（有{}必须写return）

（2）循环生成的组件需要有唯一的key值区分

          注意，key值放在循环的直接容器上

5、组件化开发举例一

（1）代码示例：

     //第一部分：引入依赖

     import React, {Component} from 'react'

     import {

          AppRegistry,

          StyleSheet,

          Text,

          View,

          TouchableOpacity

     } from 'react-native'

     

     //第二部分：定义组件

     class App extends Component {

          //组件默认自带属性

          state = {

               likes:0,

          }

          //编写onPress函数

          onPress = ()=>{

               const {likes}=this.state;

               this.setState({

                    likes: likes+1i              

               });

          }

          //渲染

          render() {

               return(

                    <TouchableOpacity onPress={this.onPress}>

                         <Text>{this.state.likes}</Text>

                    </TouchableOpacity>

               );

          }

     }

     

     //第三部分：样式表

     const styles = StyleSheet.create ({

          container: {

               flex:1,

               justifyContent: 'center',

               alignItems:'center',

               backgroundColor: '#f5fcff',

          },

          welcome: {

               fontSize:20,

               textAlign: 'center'

               margin:10,

          },

     });

     //第四部分：注册组件

     AppRegistry.registerComponent('App', ()=>App);

（2）总结

     【1】万物生长靠太阳，界面变化靠状态state

     【2】state的状态修改不能直接修改，必须通过setState方法

     【3】setState是异步操作，修改不能马上生效

     【4】每setState一次，调用一次render方法

   

demo地址（觉得ok，可以先star，会持续更新）