React Native基础概念和基础认识

  当我们初始化一个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,表示图片的地址。
 
 
 
时间: 2024-10-08 14:26:37

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

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

一.获取硬件信息,使用react-native-device-info插件,配置说明: 1.首先需要安装组件:npm install react-native-device-info --save 2.IOS初始化:打开Xcode——>右击Libraries——>选择文件到当前项目,进入到node_modules/react-native-device-info——>添加.xcodeproj文件 2.1.在Xcode中点击你的工程名字——>Build Phases——>Lin

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

一.React-native-device-info https://github.com/rebeccahughes/react-native-device-info 二.修改App名称 三.定位权限. 四.解决ListView+TextInput 弹出keyboard时的Bug问题 参考: https://github.com/facebook/react-native/issues/8180

Python笔记一 基础概念与基础认识

简介 python的创始人为吉多·范罗苏姆. 在10月份TIOBE排行榜上,python为第五,占有率为3.775%. python是一门动态解释型的强类型定义语言. 执行.py的时候是由python解释器,逐行编译→解释,在运行. PyCodeObject 是编译结果,运行完成后,保存到pyc中,以便下次直接运行pyc文件 动态类型 是指运行期间才去做数据类型检查的语言. 强类型定义语言 是指一旦一个变量被指定了某个数据类型,不经过强制转换,永远都是这个类型. 优点: 优雅.明确.简单. 开发

React Native专题-江清清

本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装R

React Native专题文章讲解,不断更新中.....

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50633488 本文出自:[江清清的博客] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装React Nati

React Native基础与入门(二)--初识React Native

React Native组件 React Native是用React Native框架来组建Android和IOS App的技术,那么React Native组件就是React组件.React组件让你将UI分割成独立的.可重用的一些碎片或部分,这些部分都是相互独立的. 创建组件的三种方式 1.ES6创建组件的方式 export default class HelloComponent extends Component { render() { return <Text style={{font

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

在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小步>. 在本篇里,让我们一起来了解一下,什么是Flexbox布局,以及如何使用. 一.长度的单位 在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示“与设备像素密度无关的逻辑像素点”. 这个怎么理解呢? 我们知道,屏幕上一个发光的最小点,对应着一个

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(