详细记录本人学习react-native的过程

详细记录本人学习react-native的过程：

本人最近两天去了新单位，之后单位用的开发框架和之前接触的完全不一样，所以学习到了react-native

1、首先安装软件

（1）要安装的时候，大家一定要按照官网一步一步来才可以，不然特别容易出错，具体的安装细节，直接观看官网

（2）Yarn的安装

Yarn是Facebook提供的代替npm的工具，可以加速node模块的下载

npm install yarn -g

检查是否安装成功

yarn -V

2、react-native的一些目录结构

在这个文件中与我们相关的有以下三个文件，其余的文件我们几乎都是用不到的

（1）index.js：项目的入口文件；

（2）App.js：项目的根目录；

（3）package.json：项目的描述文件；

3、react-native语法

（1）在rn中默认容器布局方式，都是flex;

方向flex-direction:column

当给标签添加属性：flex:1时，当方向是横向的时候，则代表的是宽度；当是上下纵向的时候，则表示的是高度

（2）单位：不用加px;不用加vw或者vh;可以加百分比，需要注意的是用引号引起来

（3）比较方便快捷的获取屏幕的宽、高：使用Dimensions

（4）视图：View

相当于网页中的div

不支持添加字体大小、字体颜色等

不能直接放置文本内容

不支持直接绑定点击事件（一般使用TouchableOpacity来）

（5）Text：文本组件

文本标签可以设置字体颜色、大小等

支持绑定点击事件

文字阴影的书写方式

textShadow:{
textShadowColor:'red',
//水平的偏移和高度的偏移
textShadowOffset:{width:2,height:2},
//阴影的模糊度
textShadowRadius:1
}

注意:文本信息，必须要写在Text里面才可以

（7）变换

<Text style = {{backgroundColor:'aqua',transform:[{translateY:200},{scale:2}]}}</Text>

（8）TouchableOpacity

可以绑定点击事件的块级标签

相当于块级的容器

支持绑定点击事件onPress

可以设置点击时的透明度

在这个里面可以通过activeOpacity这个属性可以控制点击的透明程度，activeOpacity = {1}

<TouchableOpacity onPress = {handlePress} activeOpacity = {0}></TouchableOpacity>

（9）组件

函数组件（没有state;没有生命周期；适合简单的场景）

类组件（适合复杂的场景；有state即状态；有生命周期componentDidMount相当于vue中的mounted）

4、样式的设置

（1）创建样式对象

<View style={{marginTop:8,padding:8,backgroundColor:'blue'}}></View>

这样的写法，可以理解为：外边的大括号里面放着一个对象；书写方式需要使用驼峰式命名法

（2）直接设置样式对象

const styles = StyleSheet.create({
card:{
backgroundColor:'#ccc'
  }
})

（3）样式的优先级和继承

在react-native中没有样式的继承

在合并对象中右边的优先级高

<View style={[styles.card,{background:'yellow'}]}></Viwe>
const style = StyleSheet.create({
card:{
backgroundColor:'#ccc'
  }
})

5、react-native弹性布局

和我们的css很相似，唯一不同的是容器本身认为是弹性布局，所以在我们设置样式的时候，不要写display:flex;

6、组件状态state

状态的改变和react中的一样；

//我们定义一个状态
state:{
name:'老城'，
type:'牛逼'
}
//定义一个方法，在这里去修改状态中的属性
updateState =>(){
const type = this.state.type == '牛逼'？"帅"："牛逼"；
//渲染到视图中
this.setState({type})
}
render(){
const {name,type} = this.state;
return (
<View>
     <Text onPress={this.updateState}>名称：{name}</Text>
     <Text>特点：{type}</Text>
</View>)
}

7、组件属性props

子组件中的内容

constructor(props){
super(props);
//在这个里面的数据，是由父组件传递过来的
this.state={name:props.name}
}
//触摸事件
updateState = ()=>{
const name = this.state.name == '老城牛逼'？'老陈你咋不翻车呢'：'老陈牛逼'；
this.setState({name:name})
}
render(){
const {name} = this.state;
return(
  <View>
      <Text onPress={this.updateState}>{name}</Text>
  </View>)
}

父组件中内容

render(){
return (
<View style={styles.container}>
//包裹着我们的子组件，在这里将所需要的数据进行一个传递，实际上是将值传递到props里面
   <SiteNameComponent name={'老陈牛逼'} />
</View>)
}

可以用作插槽，类似于vue中的slot

在子组件中我们需要在相应的位置，添加{props.children}

8、输入组件TextInput

(1)下划线颜色，透明则为transparent

underlineColorAndroid = ‘transparent’

(2)占位符

placeholder = '请输入邮箱’

(3)占位符的额字体颜色

placeholderTextColor="#ccc"

(4)字母大写格式

none/sentences/words/characters

autoCapitalize = ‘none’

(5)键盘类型，可选的值有:default/number-pad/decimal-pad/numeric/email-address/phone-pad

keyborderType=“email-address”

(6)键盘上的返回键类型，可选的值有none/go/next/search/send

returnKeyType=‘next’

(7)文本变更后的回到函数，参数为输入框的文本

onChangeText={this.handleEmail}

(8)是否属于密码框类型

secureTextEntry = {true}

(9)多行设置

multiline = {true}

(10)行数

numberOfLine={4}

(11)文本的位置靠上

textAlignVertical = ‘top’

(12)封装视图，使其可以正确响应触摸操作

9、图片组件Image

在Android上是不支持GIF和We格式的，你需要在andioid/app/bulid.gradle文件中根据需要手动添加模块，当我们修改了里面的内容，在这个时候，一定要注意的是：重新启动，效果才可以出来

render(){
//为了有滚动的效果
<ScrollView>
   //加载本地图片
   <Image source={require('./assets/1.png')}/>
   //加载网路图片，在这里需要注意的函数一定要注意宽度和高度
   <Image style={{margin:10,width:177,height:100}}
          source={{uri:'http://www.twle.cn/static/i/img.jpg'}}/>
   //图片显示模式，contain,正常的比例缩放到整个可以刚好放进来
    <Image style={{margin:10,width:200,height:200，       resizeMode:'contain',borderWidth:1,borderColor:'#333'}}
          source={require('./assets/img1.jpg')}/>
     //不会变形，放大图片到刚好覆盖住整个内容
    <Image style={{margin:10,width:200,height:200,resizeMode:'cover'}}}
          source={require('./assets/img1.jpg')/>
     //直接将图片拉伸成设置的大小，图片会变形
     <Image style={{margin:10,width:200,height:200,resizeMode:'stretch'}}}
          source={require('./assets/img1.jpg')/>     
</ScrollView>
}

10、活动指示器组件ActivityIndicator

state = {animating:true}
closeActivityIndicator = ()=>{
this.setState({
animating : !this.state.animating
})
}
componentDidMount = ()=>this.closrActivityIndicator()
render(){
//活动指示器，切换animating属性进行显示隐藏切换
<ActivityIndicator animating={animating} color="#bbb" size="large" />}

11、ImageBackground

一个可以使用图片当做背景的容器，相当于以前的div+背景图片

在这里需要指定它们宽高

<ImageBackground source={require('')}  style = {{}}><ImageBackground>

12、弹出框Alert

弹出框：一般用于弹出提示、弹出警告、弹出确认等需要用户注意和确认的动作

13、存储数据组件AsyncStorage

异步存储组件需要我们进行导入

import AsyncStorage from '@react-native-community/async-storage'

14、动画组件Animated

15、开关组件Switch

<Switch onValueChange={this.toggleSwitch} value={this.state.switchValue} />

16、状态栏组件StatusBar

状态栏就是手机屏幕最顶层上一个区域，包含运营商名称、网络情况、电池情况那一条

<StatusBar barStyle = {this.state.barStyle} hidden={this.state.hidden} />

17、选择器Picker

<Picker selectedValue = {this.state.user} onValueChange = {this.updateUser}>
//设置选项
{
this.user.map((o,index)=><Picker.item label = {o.label} value = {o.value}/>)
}
</Picker>

18、网络请求

（1）get请求

request(){
      return fetch(apiURL,{method:'GET'})
      .then(response=>response.json())
      .then(data=>{consoloe.log(data);return data})
      .catch(err=>{
      console.log(err);
      })
      
}

19、调试

（1）使用谷歌浏览器来调试

使用谷歌浏览器即可

不能查看标签结构

不能查看网络请求

（2）使用rn推荐的工作react-native-debugger来调试

不能查看标签结构

不能查看网络请求

（3）想要查看网络请求

找到项目的入口文件index.js

加入以下代码即可

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

20、事件

绑定事件特别需要注意this的指向问题，可以总计为如下的方式：

使用箭头函数

通过bind重新绑定this

匿名函数

21、生命周期

（1）constructor

组件被实例化的时候触发，一般用作对组件做初始化工作，如设置state等

constructor(){
super();
console.log(’构造函数初始化‘)；
//对state做初始化
 this.state={
 num:100
 }
}

（2）render

组件开始渲染时触发

组件被更新时触发–state和props发生改变时触发

（3）componentDidMount

组件挂载完毕，可以发送异步请求获取数据

（4）componentWillUnmount

组件被卸载时触发

一般用在清除定时器或者取消订阅等

22、mobx

react中全局数据管理库，可以简单的实现数据的跨组件共享，类似vue中的vuex