React Native 入门基础

Posted 2022-12-11 殇神马

一、前言
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>
    );