React学习笔记（第二天）

 ReactNative:
  扩展:
\node_modules\react-native\local-cli\server\server.js

  1、概述
   ReactNative：
    Build native mobile apps using JavaScript and React

    采用js和react来完成移动端原生app开发(NativeApp)

    竞品: 
      weex(阿里,采用vue的语法来实现nativeAPP)
      flutter(Google，采用dart语言来编程)
  
   环境:
     ①pc端的模板项目

     ②移动端的模拟器
      android\app\build\outputs\apk
       步骤1：确认下是否安装myapp的安装包
       步骤2：启动myapp
       步骤3：确认电脑的ip、8081
         查看ip地址:windows+R->cmd->ipconfig

               
       步骤4: 在模拟器中 找到myapp的应用，在此应用内部，按下menu按键/启动摇一摇，启动一个开发菜单
        点击dev settings（开发设置）
     点击debug server host & port for device
     在输入框中输入ip地址和端口:
     172.163.100.145:8081
       
       步骤5：检查配置是否生效
        摇一摇--》reload
    第一次配置ip和端口，reload之类 默认效果看不着，将myapp关闭(近期任务，下滑关闭)，再重新打开

 2、组件的基本处理
    组件是可被反复使用的，带有特定功能的视图

    创建:
      import React,{Component} from 'react'

      export default class Demo01 extends Component{
        
        render(){
      return ***
    }
      }

    调用:
      import Demo01 from '****'

      <Demo01></Demo01>
    
    注意事项:
     ①es6的模块化规范中，如果导出一个模块指定default关键字，在引入模块时是无需指定花括号；否则是需要通过花括号指定模块名字
     ②所有的类要先引入再调用
     ③不要写html元素，这里不是web编程
  
  3、数据基本处理
   3.1 state
    初始化: 
      constructor(){
        super()
    this.state = {count:0}
      }
    读：this.state.count
    写: this.setState({count:1})

   3.2 fetch

    fetch(url)
    .then((response)=>{
     return response.json()
    })
    .then((result)=>{
      //result就是服务器端所返回的一个经过json反序列化之后的对象或者数组
    })
     
    3.3 组件间通信
     props来完成父--》子的通信工作，也可以通过传递一个有参数的方法给子组件来实现子--》父的通信工作

  4、样式和布局
    <Text style={{color:'red'}}></Text>
    (rn是支持绝大多数css中的样式设定)

    布局也是支持flexbox的flexDirection/justifyContent/alignItems
    但是有一个注意事项:默认主轴是column

    样式的封装和复用:
     ①引入StyleSheet
      import {StyleSheet} from 'react-native'
     ②创建要封装的样式
      var MyStyles = StyleSheet.create({
        myText:{color:'red'}
      })
     ③调用
      <Text style={MyStyles.myText}></Text>

  5、RN中的各种封装的组件的用法(重点)
    5.1 View
     View 容器
    5.2 Text
     Text 显示文本
    5.3 Button
     Button 按钮
     <Button onPress={this.handlePress} title="clickMe" color='red'></Button>
    5.4 Image
     本地图片:
      <Image source={require('*****')}></Image>
     网络图片:
      <Image style={{width:100,height:100}} source={{uri:""}}></Image>
     
     注意事项:
      ①网络资源图片必须设置宽高才能显示
      ②加载本地图片时，路径不允许做任何的计算（可以将图片存在服务器，网络资源图片时允许做计算的）
    5.5 FlatList
     FlatList是rn所提供的一种高性能列表

     showItem(info){
      return 列表项要渲染的内容
     }

     <FlatList data={} renderItem={this.showItem}></FlatList>
   

  注意事项：
     ①rn中所有的自定义方法 如何需要用到this，定义时就得定义成箭头函数的形式
     ②FlatList在指定data时，为了保险起见，建议指定extraData保证数据可以及时在变化时更新视图
     ③FlatList在渲染组件时，如何解决key的问题？
      解决方案是从数据源头着手，在data所对应的对象数组中，给每一个对象添加一个key的属性（值也得是unique唯一的）

    5.6 TouchableOpacity
     此组件是用来给一些不支持点按的组件添加点按的效果(①有视觉变化 ②支持绑定press事件)

     import {TouchableOpacity} from 'react-native'

     <TouchableOpacity onPress={}>
       <Text></Text>
       <Image></Image>
     </TouchableOpacity>

    5.7 ActivityIndicator
     是一个活动指示器(loading)

     import {ActivityIndicator} from 'react-native'

     <ActivityIndicator size="" color=""></ActivityIndicator>
    

    5.8 TextInput
      文本输入框 是可以用来获取用户输入的信息

      <TextInput placeholder="请输入用户名" onChangeText={} secureTextEntry></TextInput>

    1、模板
     View/TextInput/Button/FlatList(Text)
        2、功能
     点击Button，获取输入框的值，添加到FlatList中显示在Text

     步骤1：TextInput在每次触发ChangeText事件时，将值存储在state
     步骤2：点击Button，获取state中输入框保存的数据，添加到一个数组中(状态)
     步骤3：列表渲染状态中数组中的数据

    5.9 Switch
        Switch是一个滑动开关，默认情况下Switch就是一种受控的状态，必须按照受控组件处理的方式让Switch正常工作
    
    受控组件的处理标准流程:
     ①初始化状态
     ②将状态的值绑定到value
     ③在触发ValueChange事件时，修改状态的值
        
    <Switch onValueChange=""></Switch>

    5.10 ScrollView
     滚动相关的一个容器
     import {ScrollView} from 'react-native'

     <ScrollView></ScrollView>

     特征:它会占据它能占据的空间；可以借助于此特征来实现固定页脚的效果(rn中并没有提供页脚组件)

    
    准备工作:
      ①npm start 启动开发服务器
      ②启动mysql数据库服务器
      ③启动基于node实现的http服务器

   

  6、RN的导航和路由处理
     ReactNative本身并不提供导航功能

     ReactNavigation就是一个在ReactNative中处理导航功能的非常优秀的第三方工具

     步骤：
      ①安装
       yarn add react-navigation
       npm install react-navigation
      ②引入到项目中
       import {createStackNavigator} from 'react-navigation'
      ③配置路由
        var myNavigator = createStackNavigator({
      'login':{screen:LoginComponent},
      'register':{screen:RegisterComponent}
    })

    AppRegistry.registerComponent("myapp",()=>myNavigator)

    注意事项：reactNavigation会默认加载设置的第一个路由信息对应的组件

      ④跳转和传参

     跳转:
      跳转到一个目的地路由对应的组件？
       回顾
            
      
      this.props.navigation.push()/pop()

     传参:
       ①发送
        this.props.navigation
     .push('main',{uname:'dingding'})
       ②接收
        this.props.navigation.getParam('uname')

https://github.com/enaqx/awesome-react (基于React的第三方资料的整合)

https://reactnavigation.org (推荐的可以用在reactNative中的路由导航工具)