ReactNative(0.54)总结

RN简单来说，就是ReactJs+java+ObjectC混合开发，跨平台App

Part1：

1.首先安装RN运行环境需要：JDK,NodeJs,Python2,React-Native-Cli客户端，ANDROID STUDIO(用于安装模拟器),WebStorm(IDE)

2.WS里新建 ReactNative项目，自动生成项目目录结构

Part2:

1.最小组成单位，js文件,入口文件为App.js

2.代码组成：

//导入相关组件包
import React,{Component} from "react";
import {View, Image, Text, StyleSheet} from "react-native";

//默认导出的组件
export default class aroundPage extends Component{

    //渲染界面函数
    render(){
        return(
            //与ReactJs不同这里直接用的是相关的组件
            <View style={styles.contain}>
                <Image source={require("../img/fujing.gif")}></Image>
            </View>
        );
    }
}
//样式常量
const styles = StyleSheet.create({
    contain:{flex:1,flexDirection:"column",justifyContent: "center",alignItems: "center"},
});

3.运行 reactnative-run-android

Part3:

基本功能介绍：

1.props属性：在自定义组件里面声明{this.props.自定义属性名}，当调用该组件时，直接在组件上给自定义props属性赋值，他将该值传递进入自定义组件中所以props属性的作用主要是组件和组件之间的值传递作用

2.state状态：state状态用来改变界面显示，用法:{this.state.自定义属性名},当state里属性改变的时候，会重新调用render()函数渲染界面，修改可以用this.setState({自定义属性名：值}) 在RN中我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。一般来说，你需要在 constructor 中初始化state，然后在需要修改时调用setState方法

3.页面布局：FlexBox布局 flexDirection:决定主轴（X轴）的位置，row横向，column纵向，决定后，次轴（y轴）位置也确定了，因为次轴始终和主轴垂直 justifyContent:组件按主轴的排列方式，flex-start,flex-end,space-between ... alignItems:组件按次轴的排列方式，flex-start,flex-end ...

4.屏幕宽和高：一般直接获取并且赋值为常量，直接使用

	var Dimensions = require('Dimensions');
	const {width, height, scale} = Dimensions.get('window');

5.样式：组件都接受名为style的属性。这些样式基本上是遵循了 web 上的 CSS3标准，建议使用StyleSheet.create来集中定义组件的样式

6.页面路由跳转：引用 react-navigation里各种导航器

StatckNavigator,静态导航从上到下

	const homeList = StackNavigator(
    //路由配置
    {
        home: {screen: homePage,
            navigationOptions:{
            header:null
        }},
        //路由js
        adCode: {screen: adCodePage,
            //各种属性配置
            navigationOptions:{
            //路由页面title
            headerTitle:"我的二维码",
            headerTitleStyle:{marginLeft:width/2.5,color:'gray'},
            headerLeft:null,
            gesturesEnabled:true
        }},
        codeScanner:{screen:qrcodeScanner,
        navigationOptions:{
            headerTitle: "扫描二维码",
            headerTitleStyle: {color:"gray"},
            gesturesEnabled: true
        }}
    },
    {
        //这里可以写其他配置
    }
)
//导出该导航器，并渲染默认界面
export default homeList;

createMaterialTopTabNavigator：顶部导航栏

	const orderPages = createMaterialTopTabNavigator({
    all:{screen:allOrder,
    navigationOptions:{
        tabBarLabel:'全部订单'
    }},
    evn:{screen:evnOrder,
    navigationOptions: {
        tabBarLabel: '待评价'
    }},
    ref:{screen:refOrder,
        navigationOptions:{
        tabBarLabel:'退款'
    }
    }
},{
    swipeEnabled:true,
    initialRouteName:'all',
    lazy:true,
    tabBarOptions:{
        showIcon:false,
        showLabel:true,
        activeTintColor:'white',
        activeBackgroundColor:'black',
        style:{
            backgroundColor:'orange',
            height: 55,
        }
    },
    labelStyle:{
        fontSize:20,
        textAlign:'center',
        marginTop: 5,
        color:'orange'
    },
    animationEnabled:true
})

createBottomTabNavigator：底部导航栏

/这里不能用TabBavigator
const pages = createBottomTabNavigator({
    home:{screen:homePage,
          navigationOptions:{
            tabBarLabel:'首页',
            tabBarIcon:({tintColor})=>(
                <Image source={require("./img/home.png")} style={styles.img}></Image>
            )
          }
    },
    around:{
      screen:aroundPage,
        navigationOptions:{
        tabBarLabel:'附近',
            tabBarIcon:({tintColor})=>(
             <Image source={require('./img/around.png')} style={styles.img}/>
            )
        }
    },
    order:{
      screen:orderPage,
        navigationOptions:{
        tabBarLabel:'订单',
            tabBarIcon:({tintColor})=>(
                <Image style={styles.img} source={require('./img/order.png')}/>
            )
        }
    },
    my:{
      screen: myPage,
      navigationOptions: {
        tabBarLabel: '我的',
          tabBarIcon:({tintColor})=>(
              <Image style={styles.img} source={require("./img/my.png")}/>
          )
      }
    }
    },
    {
      swipeEnabled:true,
        initialRouteName:'home',
        lazy:true,
        tabBarOptions:{
          showIcon:true,
            showLabel:true,
            activeTintColor:'black',
            activeBackgroundColor:'whitesmoke',
            style:{
              backgroundColor:'white',
                height: 55,
            }
        },
        labelStyle:{
          fontSize:12,
            textAlign:'center',
            marginTop: 0,
            color:'black'
        },
        animationEnabled:true
    }
)

7.AJAX请求： fetch:基于promise的，层级传递

	//GET请求
	fetch('http://ip.taobao.com/service/getIpInfo.php?ip=59.108.51.32', {
            method: 'GET',
            headers: {
               'Content-Type': 'application/json'
           }
       }).then((response) => {//1
           console.log(response);
       }).catch((err) => {//2
           console.error(err);
       });
	//POST请求
	fetch('http://ip.taobao.com/service/getIpInfo.php', {
         method: 'POST',//1
         headers: {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({//2
             'ip': '59.108.23.12'
         })
     }).then((response) => response.json())
         .then((jsonData) => {
             let country = jsonData.data.country;
             let city = jsonData.data.city;
             alert("country:" + country + "-------city:" + city);
         });

Response对象中包含了多种属性： status (number) ： HTTP请求的响应状态行。 statusText (String) ：服务器返回的状态报告。 ok (boolean) ：如果返回200表示请求成功，则为true。 headers (Headers) ：返回头部信息。 url (String) ：请求的地址。

Response对象还提供了多种方法： formData()：返回一个带有FormData的Promise。 json() ：返回一个带有JSON对象的Promise。 text()：返回一个带有文本的Promise。 clone() ：复制一份response。 error()：返回一个与网络相关的错误。 redirect()：返回了一个可以重定向至某URL的response。 arrayBuffer()：返回一个带有ArrayBuffer的Promise。 blob() ：返回一个带有Blob的Promise。

8.Url跳转：

	Linking.openUrl("http:// ...").catch();

9.常用组件:View,Text,TextInput,Button,Image,TouchableOpacity(制作按钮)，ScrollView,FlatList... 更多组件看React官网，第三方组件github上也有很多，注意版本

总结差不多了。。。。。。。。。。。。

RN里踩过的坑，持续更新，必须看看： https://my.oschina.net/huayangchen/blog/1919732

RN自己写的项目： https://github.com/huayangMr/MallApp

来源：oschina

链接：https://my.oschina.net/u/2928350/blog/1982532

标签

react

React Native

FLEX

reactjs