React Native 入门基础

一、前言
React Native是Facebook推出的使用React和平台原生功能来构建Android和iOS应用的开源移动跨平台框架;

-视图（Views）和移动开发
在Android和iOS移动应用中，一个视图是UI的基本组成部分：屏幕上的一个小矩形元素、可用于显示文本、图像、和响应用户输入。某些视图也可以包含其他视图，全部都是视图;

-原生组件
在Android开发中是使用Java或者Kotlin来编写视图，在iOS开发中是使用Object-C和Swift来编写视图，在React Native中则是使用React组件通过JavaScript来调用这些视图；在运行时，React Native为这些组件创建相应的Android和iOS视图；由于React Native组件就是对Android和iOS原生视图的封装，因此使用React Native编写的应用外观、感觉和性能和其他任何原生应用一样；我们将这些平台支持的组件称之为原生组件；

-核心组件
React Native中有一些基本的，随时可用的原生组件，这些组件就是React Native中的核心组件;
我们常用的核心组件主要有以下：

ReactNative UI Component	Android View	iOS View
`<View>`	`ViewGroup`	`UIView`
`<Text>`	`TextView`	`UITextView`
`<Image>`	`ImageView`	`UIImageView`
`<TextInput>`	`EditText`	`UITextField`
`<ScrollView>`	`ScrollView`	`UIScrollView`

-React 基础
React Native是通过使用React 组件和JavaScript来编写的，所以我们肯定是要学习
React的，最起码是基本的React 基础；
React中的核心概念
JSX、Component、props、state
（1）JSX
JSX即JavaScript XML,是一种语法糖，可以在JavaScript中写HTML的一种语法;

import React from 'react'
import {
    View,
    Text,
} from 'react-native';
    export default function CustomComponent(){
       return (
         <View>
          <Text>自定义组件</Text>
         </View>
        )
     }

上面就是在JavaScript 函数CustomComponent中编写了HTML代码即返回的< View >…这一块代码;，这就是JSX

（2）Component
React是组件化的，即通过使用React 提供的一些组件组成复杂的UI；
上面我们也学习了一些核心组件;
除了React Native提供的一些核心组件，我们也可以自定义组件，自定义组件我们可以定义函数式组件，也可以定义class组件；

-函数式组件

import React from 'react'
import {
  View,
  Text,
} from 'react-native';
  export default function CustomComponent(){
     return (
       <View>
        <Text>自定义组件</Text>
       </View>
      )
   }

-class组件

import React ,{Component} from 'react'
import {
 View,
 Text,
} from 'react-native'; 
export default class CustomComponent extends Component{

render(){
return (
      <View>
       <Text>自定义组件</Text>
      </View>
     )
   }
  }

使用组件： < CustomComponent />

（3）props
props即propertites的简写，属性的意思，因为React是组件化的，我们定义一个组件时，可以给组件定义一些属性来描述组件的特性;

  import React from 'react'
import {
    View,
    Text,
} from 'react-native';
    export default function CustomComponent(props){
       return (
         <View>
          <Text>自定义组件{props.name}</Text>
         </View>
        )
     }

 import React ,{Component} from 'react'
import {
    View,
    Text,
} from 'react-native'; 
export default class CustomComponent extends Component{
constructor(props){
   super(props)
}
render(){
 return (
         <View>
          <Text>自定义组件{this.props.name}</Text>
         </View>
        )
      }
     }

使用组件 < CustomComponent name=‘组件’>
（4）state
上面我们学习了组件的props，而state是组件中的另外一个重要的概念，state即
状态；比如用户操作页面之后，希望页面显示的数据发生相应变化，这个时候就
需要重新渲染页面;对于这种需求，我们就可以把数据放在state中，操作页面之后，我们只需要修改state，页面就会重新渲染;

import React, {Component} from 'react';
import {View, Text,TouchableHighlight} from 'react-native';
export default class CustomComponent extends Component {
  constructor(props) {
    super(props);
    this.state={
      num:0
    }
  }
  render() {
    return (
      <View>
        <TouchableHighlight onPress={()=>{
          this.setState({
             num:++this.state.num
        })
        }}>
          <Text>{this.state.num}</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

React Native 入门基础

悦读