需要的工具

Android Studio：这个是针对安卓原生开发的编译工具

genymotion :这个是安卓模拟器

Xcode :这个是iOS开发的编译工具

webstorm ：一个自己喜欢的代码编译工具（当然你也可以选择自己喜欢的编译工具，个人比较喜欢这个）

推荐学习网站

1. ：环境配置和常用组件，api 都很详细
2. ：你也可以不使用这个，但是这个是我知道的比较完善的路由导航组件
3. ：debug可以使用自带的那个工具，这个也是一个在开发中的工具，在原有的基础上添加了一些功能，可点击进去了解下
4. ：组件很丰富 ，方便查找
5. ：突然打开可能会晃眼，而且感觉页面做的很盗版，但是东西还是很不错的

推荐安装的google插件

打开翻墙工具，直接在google商店里面搜索名称即可

1，JSON-handle:帮助方便前端人员看接口数据

2，FeHelper:这个是很万能的，正则表达式，json转换，取色等等

3，Clip to Evernote:这个看是可以将当前的页面保存到印象笔记上面，如果你没有使用印象笔记就不推荐了

说在前面

我接触两周的感觉是react native和react的差不多，生命周期，组件的使用，接口的调用，都还是和react差不多，

但是标签的使用，样式的写法，和路由的使用却不一样。

目录结构介绍

页面 标签 样式 组件 路由 接口调用介绍

（一）页面 ，标签和样式

学过react的小伙伴可能更容易上手，新建页面和react的一样，

不一样的是：

1,react一大部分标签里面都是可以直接写文本的，但是这里除了Text标签可以直接写文本，其他的需要在其属性里面写文本，

比如Button，有titie属性，目前我知道的是 ，所有的标签都是从react native里面引用（自定义组件除外）。

2, 样式是对象的形式，这个可以参看react native官网，

代码如下

（二）组件

组件和其他的组件使用方法一样，不管是vue，还是react,直接引入传值，代码如下：

组件：

import React, {PureComponent} from "react";import { Text, } from "react-native";export default class TestOne extends PureComponent {  render() {    return (      
    
     这是一个组件
        );  }}复制代码

在父组件的使用方法是:

import React, { PureComponent } from "react";import { Button, StatusBar, Text, View,StyleSheet } from "react-native";import TestOne from '../../components/TestOne';export default class extends PureComponent {  render() {    return (      
          
           
        );  }}复制代码

（三）路由

配置，上面有介绍，我使用的路由是参,详细介绍还是去看文档；

我在页面文件夹下面创建了一个index的文件，作为页面路由的配置，目录结构如下

代码如下： 其他的请参考导航的接口

import React from "react";import {  createStackNavigator,  createSwitchNavigator,  createBottomTabNavigator} from "react-navigation";import Ionicons from "react-native-vector-icons/Ionicons";import HomeScreen from "./Home";import DetailsScreen from "./Details";import ModalScreen from "./Modal";import RegisterScreen from "./Auth/RegisterScreen";import SignInScreen from "./Auth/SignInScreen";import SettingsScreen from "./Settings";import UserSetScreen from "./Settings/UserSetScreen";const Tab = createBottomTabNavigator( // 这个是tab切换形式的路由  {    Home: HomeScreen,    Settings: SettingsScreen  },  {    navigationOptions: ({ navigation }) => ({  // 这里是设置tab的样式，图片 类似于小程序      tabBarIcon: ({ focused, tintColor }) => {        const { routeName } = navigation.state;        let iconName;        if (routeName === "Home") {          iconName = `ios-home`;        } else if (routeName === "Settings") {          iconName = `ios-settings`;        }        return 
    
     ;      }    }),    tabBarOptions: {      activeTintColor: "tomato",      inactiveTintColor: "gray"    }  });const MainStack = createStackNavigator(  // 普通的页面跳转 ，类似于href  {    Tab: {    //  这些是可以简写的      screen: Tab    },    Details: DetailsScreen,  //  这个就是简写的形式Details是路由名称，DetailsScreen是页面    SetUser: {      screen: UserSetScreen    }  },  {    navigationOptions: {      headerStyle: {        backgroundColor: "#f4511e"      },      headerTintColor: "#fff",      headerTitleStyle: {        fontWeight: "bold"      }    }  });const RootStack = createStackNavigator(  {    Main: {      screen: MainStack    },    MyModal: {      screen: ModalScreen    }  },  {    mode: "modal",     //  设置页面跳转的方式 从底部滑入    headerMode: "none"  });const AuthenticationNavigator = createStackNavigator({  SignIn: SignInScreen,  RegisterScreen: RegisterScreen});const AppNavigator = createSwitchNavigator({  // 不可以回退的页面 类似于 replace  Auth: AuthenticationNavigator,  Root: RootStack});export default AppNavigator;复制代码
    

路由配置好了，接下来看如何使用

import React, { PureComponent } from "react";import { Button, View, Text, StatusBar } from "react-native";export default class SignInScreen extends PureComponent {  render() {    return (      
            
       // 头部样式设置         // 页面跳转 这只是一种方式，其他的还有back push 等        
      this.props.navigation.navigate("Root")}         />        
      this.props.navigation.navigate("RegisterScreen")}        />          );  }}const sty=  StyleSheet.create({  title:{    color:'red',  }})复制代码
    

路由是可以专递值的 路由的第二个参数是个对象，里面可以用来传递一些值，具体使用如下代码

// 这个是home页面import React, { PureComponent } from "react";import { Button, StatusBar, Text, View,StyleSheet } from "react-native";import TestOne from '../../components/TestOne';export default class extends PureComponent { state = {   count: 0 }; render() {   return (     
           
            
     
      主页面home
          
            
     
      Count: {this.state.count}
            
      {  //  点击按钮的时候传递了一些值            this.props.navigation.navigate("Details", {                itemId: 86,             otherParam: "First Details",             onChangeTitle: 'title'           });         }}       />        ); }}// 这个是详情页面import React, {PureComponent} from "react";import { Button, View, Text, StatusBar } from "react-native";export default class extends PureComponent { static navigationOptions = ({ navigation }) => {   state = {   count: 0 }; render() {   const { params } = this.props.navigation.state;   const itemId = params ? params.itemId : null;   const otherParam = params ? params.otherParam : null;   return (     
             
              
       
        Details Screen
              
       
        itemId: {JSON.stringify(itemId)}
              
       
        otherParam: {JSON.stringify(otherParam)}
            
         ); }}复制代码
    

路由的使用还有很多 ，建议去看文档，上面有推荐，谢谢

（四）接口调用

接口调用和react 调用一样，封装好request的方法，这里就不说了，可以参看

（五） 未完待续，谢谢！！