• React Native基础概念和基础认识


    学习地址: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,表示图片的地址。
     
     
     
  • 相关阅读:
    Intellij使用心得(四) -- 导入Eclipse的代码格式化文件
    idea安装插件plugin(主要针对网络连接不上的情况)
    IDEA破解方法以及快捷键大全
    eclipse+maven搭建自己web系统的骨架,解决自带骨架加载无限慢的问题
    用Eclipse创建Maven多模块项目
    Maven实战--- dependencies与dependencyManagement的区别
    redis之有序集合类型(Zset)——排行榜的实现
    做一个完整的Java Web项目需要掌握的技能
    经典面试题:用户反映你开发的网站访问很慢可能会是什么原因
    linux 免密码 使用sudo 直接使用root权限执行命令
  • 原文地址:https://www.cnblogs.com/allenxieyusheng/p/5777146.html
Copyright © 2020-2023  润新知