ReactNative

https://facebook.github.io/react-native/docs
https://reactnavigation.org/

ReactNative:
 （weex也可以通过编写vue的语法代码来实现原生的开发）
  1、概述
    移动端常见的3种开发模式:
     ①webApp
      基于前端技术 （跨平台）
     ②nativeApp
      基于原生技术 （性能）
     ③hybridApp
      基于前端技术+原生技术
    
    Build native mobile apps using JavaScript and React
    使用js和react中基本语法 来实现原生应用程序的编写

    搭建环境:
     PC:
        npm install -g create-react-native-app
        
        create-react-native-app AwesomeProject

        cd AwesomeProject
        
        npm start
     Mobile:
        准备模拟器
        (https://www.yeshen.com/)
        夜神、腾讯手游、网易mumu、蓝叠。。。

 

  2、rn中组件类的创建和使用
     创建一个组件类(reactJS是一样):
      import React,{Component} from 'react'
      import {Text} from 'react-native'

      export class Demo01Component extends Component{
          render(){
              return <Text></Text>
          }
      }
     使用:
      调用组件
       import {Demo01Component} from '***'
       <Demo01Component></Demo01Component>
      
 
  3、rn中处理navigation
   reactNative本身并没有提供navigation相关的任何官方工具!
   
   有一个非常受欢迎的在RN中处理导航的第三方的工具:ReactNavigation
   (https://reactnavigation.org/)

   npm i react-navigation

   3.1 基础用法:
     import {createStackNavigator} from 'react-navigation'

     const myNavigator = createStackNavigator({
         'login':{
             screen:LoginComponent
         },
         'register':{
             screen:RegisterComponent
         }
     })

     在App.js渲染时，指定要渲染myNavigator
    
   3.2 导航:
     this.props.navigation.navigate('register')
     this.props.navigation.goBack()
   3.3 传参:
     传：this.props.navigation
        .navigate('register',{price:100})
     收:
        this.props.navigation.getParam('price')

  4、rn中处理http
    在ReactNative中实现服务器的请求和响应
    
    请求和响应:
    fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(json => console.log(json))
    

  5、rn中封装的各种组件用法
    5.1 View
     指定一个容器的
    5.2 Text
     显示一段文本内容
     <Text>。。。</Text>
    5.3 Button
     <Button title="" onPress={}></Button>
    5.4 ActivityIndicator 显示一个加载中提示（小圆圈）
     <ActivityIndicator size="" color=""></ActivityIndicator>
    
    5.5 DrawerLayoutAndroid
     指定一个抽屉（侧边栏菜单）
     <DrawerLayoutAndroid
      drawerWidth={200}
      drawerPostiton={DrawerLayoutAndroid.positions.Right}
      renderNavigationView:()=>{return 抽屉中药显示的内容}
     >
        正文
     
     </DrawerLayoutAndroid>
    
    5.6 FlatList 高性能的列表组件

     //renderItem所对应的方法 会根据data所指定的集合中元素的个数 来调用多次
     <FlatList data={[1,2,3,4,5]} renderItem={this.showItem}></FlatList>

     showItem=(info)=>{
         //info.index info.item
     }
     //进阶用法:
      下拉刷新
       //onRefresh是用来指定下拉刷新时 要执行的一个处理函数
       //refreshing是用来判断当前是否要显示刷新的加载动作
        onRefresh={} refreshing={}
      上拉加载更多
        //当滑动到页面底部时，要执行一个处理函数
        onEndReached={}
    5.7 Image:
     //加载本地资源图片
     <Image source={require('../assets/imgs/1.jpg')}></Image>
     //处理远程服务器端的图片
     <Image 
        style={{width:100,height:100}}
        source={{uri:"http://172.163.100.96/framework/webapp/ionic/project/template/src/assets/img/404/404_img1.png"}}></Image>
    5.8 KeyboardAvoidingView
     在键盘弹出的时候，将有可能被遮住的视图向上弹起避免被键盘遮住
    5.9 Modal
     Modal可以用来一个自定义的模态窗口

     <Modal
          animationType="fade" //动画效果
          transparent={false} //背景色是否透明
          visible={this.state.modalVisible} //是否要显示该窗口
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
            模态窗要显示的内容
        </Modal>
    
    5.10 Picker  实现一个选择器
     <Picker
        selectedValue={this.state.language}
        style={{ height: 50, width: 100 }}
        mode="dropdown"
        onValueChange={}>
            <Picker.Item label="Java" value="java" />
            <Picker.Item label="JavaScript" value="js" />
     </Picker>

    5.11 ScrollView
     支持滚动的容器

    5.12 slider
     支持滑动的组件（类似range），支持线性控制的音量、亮度
     <Slider></Slider>

    5.13 Switch
     是一个支持滑动的开关组件，默认是一个受控表单元素，得按照受控表单元素的流程来处理该表单元素
      ①初始化状态
      ②将状态的值绑定给value
      ③绑定事件valueChange，在处理函数中修改状态

    5.14 TextInput
        文本输入框
        <TextInput placeholder="" 
        onChangeText={}
        keyboardType="" secureTextEntry={true}></TextInput>

    5.15 TouchableOpacity
        是一个容器，放在该容器的组件将会有一个效果:点击时 有个透明度变化的效果

        <TouchableOpacity onPress={}></TouchableOpacity> 
  6、样式的处理
    import {StyleSheet} from 'react-native'

    //创建
        const myStyles = StyleSheet.create({
            myText:{
                fontSize:30,
                color:'red'
            }
        })
    //调用
        <Text style={myStyles.myText}></Text>
  7、布局的处理
    ReactNative是支持FlexBox
     flexDirection
     alignItems
     justifyContent