精华内容
参与话题
问答
  • 初涉RN RN中的MobX

    2018-06-05 15:58:33
    在刚开始做页面时, 数据绑定的时候, 对一个为array的list进行了observable, 里面的值改变的时候, 并不会重新渲染页面这里面就涉及到MobX会对什么做出反应?这个问题MobX会对在追踪函数执行过程中读取现存的可观察属性...

    在刚开始做页面时, 数据绑定的时候, 对一个为array的list进行了observable, 里面的值改变的时候, 并不会重新渲染页面

    这里面就涉及到MobX会对什么做出反应?这个问题

    MobX会对在追踪函数执行过程读取现存的可观察属性做出反应

    "读取":是对象属性的间接引用, 可以用过"."或者"[ ]"的形式完成. eg:user.name或者user['name']

    "追踪函数"是computed表达式,observer组件的render()方法和when, reaction 和 autorun的第一个入参函数

    "过程(during)"意味着只追踪那些在函数执行时被读取的observable.这些值是否由追踪函数直接或间接使用并不重要

    换句话说,MobX 不会对其作出反应:

    • 从 observable 获取的值,但是在追踪函数之外
    • 在异步调用的代码块中读取的 observable

    后来查看了官方文档, 才发现MobX追踪属性访问, 而不是值

    通过官方的文档和图可以清晰的看出来

    比如代码如下:

    let message = observable({
        title: "Foo",
        author: {
            name: "Michel"
        },
        likes: [
            "John", "Sara"
        ]
    })


    现在 MobX 基本上所做的是记录你在函数中使用的是哪个箭头。之后,只要这些箭头中的其中一个改变了(它们开始引用别的东西了),它就会重新运行。

    比如有个数字list= [1, 2, 3], 如果观测list 当list[0]=5,的时候, 这个时候并不会引起重新渲染, 就像图上面的值是改变的, 但是箭头的指向仍然是原来的, 所以就不用改变, 这个我感觉有点像c,c++中的指针, 只有当指针的指向发生改变的时候, 才能被重新观察到, 如果里面的值改变, 是不会引起重新渲染的.

    这个时候可以将list中使用observable, 它在默认情况下会进行递归应用, 到每个list[0],list[1],list[2]中, 但是这样会引起大量的重复渲染, 最好的还是将每个模块细分化, 渲染的时候只渲染一部分


    展开全文
  • RN

    2018-08-14 13:12:41
    接收到的事件处理可能导致处理结果中的某些数据需要...这些数据可以成为该RN组件的状态机变量。我们把他们称为状态机变量备选名单。 重复数据: * 该数据可以由备选名单上 的其他数据通过某种规则计算得出; * ...

    接收到的事件处理可能导致处理结果中的某些数据需要显示在UI界面上。这些数据可以成为该RN组件的状态机变量。我们把他们称为状态机变量备选名单。

    重复数据:
    * 该数据可以由备选名单上 的其他数据通过某种规则计算得出;
    *

    展开全文
  • RN8302、RN8302B

    2018-08-16 20:31:41
    RN8302、RN8302B,官方给的芯片使用手册资料,电路原理图,官方提供的源码等。
  • RN模板

    2018-02-26 15:58:40
    RN底部选项卡demo RN底部选项卡demo RN底部选项卡demo RN底部选项卡demo
  • 东芝 rn1905 RN1905PDF

    2011-03-10 16:52:27
    东芝RN1905 东芝RN1905PDF资料 东芝RN1905 东芝RN1905PDF资料
  • RN listView使用

    千次阅读 2016-10-28 10:47:29
    RN中的ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性。 常用的属性: initialListSize:指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据,而不是花费太多帧...

    RN中的ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性。

      常用的属性:
    

    initialListSize:指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据,而不是花费太多帧逐步显示出来
    dataSource:数据源,类似于安卓中我们传入BaseAdapter的数据集合。

    renderRow:渲染某一行,类似于BaseAdapter中的getItem方法。

    onEndReached:简单说就是用于分页操作,在安卓中原生开发中,我们需要自己实现相应的方法。

    onEndReachedThreshold:调用onEndReached之前的临界值,单位是像素。(默认值为1000)感觉这个1000设置很好,先如今用户不差流量,所以将体验做到最佳才是上上之策。

    refreshControl:指定RefreshControl组件,用于为ScrollView提供下拉刷新功能。(该属性是继承与ScrollView)

    renderHeader:渲染头部View,类似于安卓ListView中的addHeader.
    renderFooter :渲染底部View,类似listView中的addFooter

    renderSectionHeader :会为每个小节(section)渲染一个粘性的标题。
    粘性是指当它刚出现时,会处在对应小节的内容顶部;继续下滑当它到达屏幕顶端的时候,它会停留在屏幕顶端,一直到对应的位置被下一个小节的标题占据为止。

    <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          pageSize={3}
          refreshControl={
             <RefreshControl
               onRefresh={this.onRefresh.bind(this)}
               refreshing={this.state.isLoading}
               colors={['#0000ff', '#00ff00', '#ff0000']}
               enabled={true}
               />
           }
          />

    定义listView的item:

    renderRow(rowData, sectionID, rowID) {
            var _ = this;//这个this是通过上面this.renderRow.bind(this)传递过来的
            let sepraView;
            {/*listView分割线*/}
            //这里没有使用rowData获取length(rowData代表一条数据) 而是_.props.data拿到数据源size
            if (rowID != _.props.data.length - 1) {
                sepraView = <View style={styles.separator}/>
            }
            return (
                rowData?
                    <View key={rowID} style={{marginLeft: 20}}>
                        <View style={styles.contentContener}>
                            <Text style={styles.name}>{rowDate.name}</Text>
                            <Text style={styles.fontGray}>{rowData.desc}</Text>
                        </View>
                        {sepraView}
                    </View>
                    : <View></View>
            )
        }

    绑定数据源:
    写法基本上是固定 没什么可说的

    constructor(props) {
            super(props);
            let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
            this.state = {
                //this.props.data数据
                dataSource: ds.cloneWithRows(this.props.data),
            };
        }
    
    展开全文
  • VS Code 开源 轻量级:更少的内存和 CPU 占用率 更大的社区:插件,教程等 使用 JavaScript 和 TypeScript 时更好一点 更多“面向未来” WebStorm 更好的 PHP / Java 支持 ...Visual Studio ...

    VS Code

    • 开源
    • 轻量级:更少的内存和 CPU 占用率
    • 更大的社区:插件,教程等
    • 使用 JavaScript 和 TypeScript 时更好一点
    • 更多“面向未来”

    WebStorm

    • 更好的 PHP / Java 支持
    • 不那么突兀
    • 更可配置
    • 更稳定

    对比我选择了VSCode。因为团队都是VSCode。更多对比请搜索:“VSCode与WebStorm”。

    Visual Studio Code 安装配置RN

    1. 安装Visual Studio Code
      或者直接找同事copy。
    2. 安装React Native 相关插件
      要用VS Code开发React Native,就必须要安装其React Native插件。
    • 打开 VS Code 点击 Extensions
    • 在输入框内输入React Native
    • 选择 React Native 相关的插件安装。
      在这里插入图片描述

    用VC Code 打开RN工程

    只需要把你的RN 工程项目文件拉到打开的VC Code 编辑器即可。
    在这里插入图片描述

    用VC Code运行到模拟器

    • 打开VC Code 的终端
      在这里插入图片描述
      也可以使用快捷键:control+shift+、。也可以自行修改快捷键。

    • 查看目录文件内容
      终端打开后查看目录文件 :输入$:ls
      可以看到package.json 文件内容,有执行的执行的脚本命令。

    • 运行RN命令
      cd 到package.json 目录后运行

    "android": "react-native run-android", // 运行在安卓模拟器
    "ios": "react-native run-ios",	// 运行在iOS模拟器
    "start": "react-native start",		// 启动服务
    

    我们就执行:react-native run-ios 运行到iOS 模拟器上

    react-native run-ios
    

    在这里插入图片描述
    等待。。。一忽儿,模拟器就起来了。👏👏👏

    常用快捷键和命令

    npm install
    yarn install
    yarn start

    Control + c #结束终端执行
    Control+Shift+、#打开和隐藏终端
    Shift+Option+F #页面格式化代码
    Option+Shift+A #块注释
    Ctrl + Space #打开代码提示
    Cmd + Shift + Space #参数提示
    Cmd+B #关闭打开资源管理器 ,也就是侧边栏

    关闭VS Code分屏快捷键的设置 CMD+jj

    在这里插入图片描述

    VS Code 打开新文件覆盖窗口,始终显示一个窗口

    解决办法如下:
    Command+shift+P 然后在搜索框中输入 settings
    在 VS Code IDE 界面,通过路径 Code -> Preferences -> Settings 进入VS Code 设置。然后在设置界面的搜索框,搜索关键字 enablePreview ,会看到如下界面:
    在这里插入图片描述
    此外:
    iOS模拟器关闭应用程序快捷键:command+shift+H按两下

    部分参考

    作者:雨纷纷__
    链接:https://www.jianshu.com/p/b24cf896b05f

    展开全文
  • RN8302、RN8302B应用笔记

    2018-11-21 15:46:19
    RN8302\RN8302B应用笔记,原厂资源,绝对权威,欢迎大家下载参考
  • RN入门-新建rn项目

    2017-11-23 11:08:01
    RN入门-新建rn项目这里有个git源码 里面有每个demo的源码和说明,均可直接测试运行
  • rn代码自动提示

    千次阅读 2017-02-08 14:14:59
    要想实现RN代码自动提示,需要通过这个东西:https://github.com/virtoolswebplayer/ReactNative-LiveTemplate在webstorm中导入一个jar,重启webstorm即生效。对于stylesheet的自动提示需要先按 command+J.ps: 提示...
  • RN简单持久化

    2017-02-28 19:12:11
    http://blog.csdn.net/sinat_17775997/article/details/53728611
  • RN开发新姿势

    2017-07-05 09:47:41
    RN开发新姿势? https://docs.expo.io/versions/v18.0.0/index.htmlhttps://segmentfault.com/a/1190000008709892 通过expo直接开发?运行js?
  • RN总结

    千次阅读 2018-10-26 17:29:34
    RN总结 iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(1)基本环境 iOS原生项目(Objective-C)集成React Native(0.57.3版本)图文教程–(2)集成过程 一个RNDemo(React Native 0.57.3 + ES6)实现...
  • RN 简介

    千次阅读 2018-03-01 14:32:33
    RN开发中常见技术方案 React Native开发 JS语法 Promise Aysnc Yield 生命周期 React Native 中 component 生命周期 布局 Flex 布局 基本 导航 react-native-navigation 网路请求 react-...
  • 首先:这是一篇实战分享,但这里的内容主要来自于...一个纯RN项目我们可以分为两类(自己新建的项目和下载到的别人的项目):自己新建的项
  • RN 轮播

    2018-11-07 16:02:50
    Radio单选框 1、功能说明 用于在多个备选项中选中单个状态。 Radio 所有选项默认可见,方便用户在比较中选择,因此选项不宜过多 2、组件效果 3、代码演示 import React, { Component } from &...
  • RN 基础

    千次阅读 2016-11-18 10:08:22
    React和RN: React是facebook页面组件的抽象和形态的技术方案--Web RN app 编译后的原生应用 JavaScript用在不同的地方 ReactNative 框架,jsc react 跨平台,组件,web的发布能力 提供了原生ui组件,手势识别,...
  • RN命令

    2018-10-31 08:33:29
    npm install react-native init name 创建项目 emulator -avd [name] 运行模拟器 react-native start 开始服务 react-native run-android 运行
  • RN 渐变

    2018-06-04 18:25:12
    https://github.com/react-native-community/react-native-linear-gradient
  • RN颜色

    千次阅读 2017-02-07 17:15:17
    转自官网: 以下这些格式的颜色代码都是支持的: '#f0f' (#rgb)'#f0fc' (#rgba)'#ff00ff' (#rrggbb)'#ff00ff00' (#rrggbbaa)'rgb(255, 255, 255)''rgba(255, 255, 255, 1.0)''hsl(360, 100%, 100%)''hsla(360,...
  • RN 时间戳

    2019-04-13 14:07:00
    let curTime = Date.now(); //获取到当前时间 curTime: 1555120690696 //是指从1970.1.1到现在的毫秒(ms)数 时间与时间戳之间的转换 // 获取当前时间戳 ...var timestamp = Date.parse(new Date());...
  • RN动画

    2017-06-29 17:31:32
    最近ReactNative(以下简称RN)在前端的热度越来越高,不少同学开始在业务中尝试使用RN,这里着重介绍一下RN中动画的使用与实现原理。 使用篇 举个简单的栗子 1 2 3...
  • Rn学习

    2017-11-02 16:36:12
    随着跨平台语言的流行,rn(react native)也越来越火了,为了顺应潮流,于是我开始了我的rn学习之旅。 一、搭建环境 编译环境和运行环境参考官方文档来搭建即可,开发工具我是采用的是webstrom 二、到现阶段产生的...

空空如也

1 2 3 4 5 ... 20
收藏数 18,859
精华内容 7,543
关键字:

rn