2017-01-13

react

React模式#1 无状态函数

无状态函数(Stateless functions)是一种非常好的方式来定义可复用组件，它们内部不保存状态state或者引用refs，仅仅是函数。

1	const Greeting = () => <div>Hi there!</div>

2017-01-11

tools

Sinopia中的用户控制

在这篇文章中，我们介绍了如何使用Sinopia来搭建自己的私有npm服务器。
工作中遇到了的一个常见需求，就是对于一些sdk包，需要控制其publish流程，同时只允许若干特定用户才能publish。

这就需要用到Sinopia中关于用户控制的配置部分了。
来看看Sinopia的配置文件中关于用户控制都有哪些。

2016-12-30

javascript

ReactNative源码(js)中require路径问题

看ReactNative源码时，js部分中的require根常识中认为的加载方式不一样，真是困扰好久。
举个例子，在 webView.ios.js 文件的头部：

var ActivityIndicatorIOS = require('ActivityIndicatorIOS');
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var View = require('View');

ActivityIndicatorIOS的实际位置是Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js
而EdgeInsetsPropType的实际位置是Libraries/StyleSheet/EdgeInsetsPropType.js

这里怎么能直接require的，难道有隐藏的搜索路径设置？

2016-12-14

javascript

RecyclerViewBackedScrollView的真实面目

Intro

FB的官方ListView例子中，使用了一个RecyclerViewBackedScrollView作为ListView的内部scrollView。ListViewExample.js

<ListView
  dataSource={this.state.dataSource}
  renderRow={this._renderRow}
  renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
  renderSeparator={this._renderSeparator}
/>

从名字上看很不错，“可重用的”，应该能解决性能问题。但是实际情况呢？
先直接告诉你，实际不是你想象的。

2016-12-06

exception

react-native start后出现ENOSPC错误的解决办法

ubuntu系统

操作

执行react-native start

错误：

2016-11-23

javascript

React开发中的Provider和HOC模式

Provider模式

许多的React库都需要在所有的组件树中传递数据。比如说，Redux需要传递他的store，而React Router需要传递当前的地址。

一个看似可行的方案时使用共享的可变状态，但这只能在客户端使用。当我们需要使用服务器端预渲染时，这种方案不可靠。

所幸，React提供了一种自上而下传递数据的途径： context。我们可以把它看做组件树的一个全局变量。

在app的最外部，我们可以提供一个Provider，它的唯一角色就是给当前的组件树的context增加数据，来提供给所有的子节点使用。

我们将使用”主题”的例子来解释这个模式： 我们需要将自定义的主题信息传递到app的每个地方。

2016-11-21

javascript

ReactNative ReloadJs的实现

写在前面

RN的Dev菜单有一个Reload，我们经常使用，效果是刷新当前app的js代码，类似于Web中的“刷新”或者”F5”。
这个特性其实可以拿来做热更新：

2016-10-28

react-native

react-native-android下NavigationBar的title居中

加一个内置的样式就可以了：

<Navigator.NavigationBar
  navigationStyles={Navigator.NavigationBar.StylesIOS}
  routeMapper={{
    LeftButton: this.navBarLeftButton,
    RightButton: this.navBarRightButton,
    Title: this.navBarTitle,
  }}
  style={{ backgroundColor: 'gray' }}
  />