学习地址:https://github.com/vczero/react-native-lesson  
当我们初始化一个RN项目的时候主要的是index.ios.js文件和index.android.js文件
然后还包括和一些依赖(什么是依赖?就比如说你使用jquery就要下载这个jquery.js一样,这个被称为依赖)和原生的ios项目工程文件夹
和原生的的Android原生文件夹,当然我们的编辑在index.ios.js(Android)等(一般情况下不需要动原生的项目工程)。
ok!下面我们开始进入index.ios.js文件
首先:我们引入react模块(相当于各种组件的集合以及其他东东)
import React,{Component}from 'react';

  

然后是引入当前文件所要使用的组件
import {
NavigatorIOS,
AppRegistry,
StyleSheet,
View
} from 'react-native';

其实,这只是一个语法糖而已,比如AppRegistry我们可以这样定义:var AppRegistry = React.AppRegistry;

  然后是定义一个组件 作为接口

 构建组件入口。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法,
组件定义好了就可以给组件添加相应的样式,采用
var xxx=StyleSheet.create({
.......
})

  然后被引用:

<View style={{}}></View>
<View style={xxx.name}></View>

  好了 一个初始化的界面的代码基本上都如上 那么接下来可以进行开发了

但是在开发之前~我们得有如下的基本基础:

Node.js基础(es6)

JSX语法基础

Flexbox布局

三、目前需要关注的文件

1、目前阶段有几个文件时需要注意下的:
(1)在xcode项目代码中AppDelegate.m会标识入口文件,例如:(服务器)
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
如果是网上下载别人的源码,注意此处的ip和端口是否有被修改。
(2)闪屏界面在哪修改?在xcode项目中找到LaunchScreen.xib文件,点击,你会看到界面,这个就是启动界面,你手动添加组件或者修改文本即可,最好了解下xcode的使用。
(3)文本编辑器打开index.ios.js文件,是js代码的入口文件,所有的代码编写从这开始,可以定义自己的模块和引入第三方模块。
四:其他:
 <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>

其中,Image标签的source的第一个大括号是模板,第二个大括号是js对象,js对象里面有个key是uri,表示图片的地址。
 
 
 

React Native基础概念和基础认识的更多相关文章

  1. react native ios 开发,基础配置笔记。

    一.获取硬件信息,使用react-native-device-info插件,配置说明: 1.首先需要安装组件:npm install react-native-device-info --save 2 ...

  2. react native android 开发,基础配置笔记。

    一.React-native-device-info https://github.com/rebeccahughes/react-native-device-info 二.修改App名称 三.定位权 ...

  3. 是时候了解React Native了

    文章首发于简书,欢迎关注 随着科技的发展,手机开发也在向好的方向不停的转变.IOS和Android两大手机操作横空出世,称霸江湖.我们每开发一个手机软件最少都需要开发这两个终端. 两大操作系统都在不断 ...

  4. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  5. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  6. React Native拆包及热更新方案 · Solartisan

    作者:solart 版权声明:本文图文为博主原创,转载请注明出处. 随着 React Native 的不断发展完善,越来越多的公司选择使用 React Native 替代 iOS/Android 进行 ...

  7. React Native 在 Airbnb(译文)

    在Android,iOS,Web和跨平台框架的横向对比中,React Native本身是一个相对较新且快速开发移动的平台.两年后,我们可以肯定地说React Native在很多方面都是革命性的.这是移 ...

  8. Weex 和 React Native 的比较看这里

    写在前面 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. Native App 特点: 性能好 完美的用户体验 开发成本高,无法跨平台 升级困难 (审核) ...

  9. React Native基础&入门教程:初步使用Flexbox布局

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...

随机推荐

  1. 5分钟实现集群-NTP时间同步

    环境:VMware-Workstation-12-Pro,Windows-10,CentOS-7.5,Xshell5 NTP基本介绍 NTP(Network TimeProtocol,网络时间协议), ...

  2. PAT Counting Leaves[一般]

    1004 Counting Leaves (30)(30 分) A family hierarchy is usually presented by a pedigree tree. Your job ...

  3. $scope.$apply

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay, ...

  4. OCR学习及tesseract的一些测试

    最近接触OCR,先收集一些资料,包括成熟软件.SDK.流行算法. 1. 一个对现有OCR软件及SDK的总结,比较全面,包括支持平台.编程语言.支持字体语言.输出格式.相关链接等 http://en.w ...

  5. C++中的访问权限

    C++中类的成员的权限: private:只能由该类的成员函数,友元函数访问,不能被该类的对象访问. protected:除了private外还能被子类的函数访问,同样不能被该类的对象访问. publ ...

  6. C/S模型之命名管道

    说明:利用管道实现服务端与客户端之间的交互.效果等同于利用socket. 命名管道(NamedPipe)是一种简单的进程间通信(IPC)机制,是服务器进程和一个或多个客户进程之间通信的单向或双向管道. ...

  7. Trove系列(六)——Trove的安全组功能和Trove的卷数据快照功能介绍

    Trove的安全组功能功能描述用户目前没有办法在Trove guest 实例上配置安全组 和 安全组规则. 我们建议按照以下指导原则创建一个简单的安全组操作规则.本功能作为Trove 的附加功能实现( ...

  8. PDF常见问题总结

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  9. Linux服务器---DansGuardian

    DansGuardian DansGuardian可以限制客户端的访问,通过这个软件,我们可以限制哪些网站不可以访问.哪些内容不能下载. 1.下载DansGuardian,提供一个网址http://w ...

  10. web前端----JavaScript对象

    简介: 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String.Math.Array.Date.RegExp都是Jav ...