React Native

React

React

React 按照 组件（Component）组织页面结构。创建之后，就像 HTML 标准标签中添加了新标签一样 （Web Components）。
比如 HTML 4 是没有 <video> 标签的， HTML 5 加入 video audio nav 之类的标签，但这样太慢了。
我们可以自己实现一个标签的功能逻辑，然后使用。

    var HelloComponent = React.createClass({
        render: function() {
            return (
                <div>Hello World</div>
            )
        }
    });

// 然后就可以这样使用

    <HelloComponent />

当然最开始需要挂到HTML上

    React.render(
        <HelloComponent />, 
        document.querySelector('body')
    );

React Native Android

来自 race604/ZhiHuDaily-React-Native project

抽屉导航

官方提供了 DrawerLayoutAndroid 组件，其实就是对 Android 中的 DrawerLayout 的封装

<DrawerLayoutAndroid
      ref={(drawer) => { this.drawer = drawer; }}
      drawerWidth = 200
      keyboardDismissMode = "on-drag"
      drawerPosition = {DrawerLayoutAndroid.positions.Left}
      renderNavigationView = {this._renderNavigationView}>
      <View style = {styles.container}>
        {content}
      </View>
</DrawerLayoutAndroid>

列表

ListView 方法和 Android 原生的也类似，需要一个数据源 dataSource 和一个绘制每行界面的函数

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var dataSource = ds.cloneWithRows(['row 1', 'row 2']),
<ListView
  dataSource={dataSource}
  renderRow={(rowData) => <Text>{rowData}</Text>}
/>

自己封装原生组件 WebView

public class ReactWebViewManager extends SimpleViewManager<WebView> {
    public static final String REACT_CLASS = "RCTWebView";
    @UIProp(UIProp.Type.STRING)
    public static final String PROP_URL = "url";
    @UIProp(UIProp.Type.STRING)
    public static final String PROP_HTML = "html";
    @UIProp(UIProp.Type.STRING)
    public static final String PROP_CSS = "css";
    @Override
    public String getName() {
        return REACT_CLASS;
    }
    @Override
    protected WebView createViewInstance(ThemedReactContext reactContext) {
        return new WebView(reactContext);
    }
    @Override
    public void updateView(final WebView webView, CatalystStylesDiffMap props) {
        super.updateView(webView, props);
        if (props.hasKey(PROP_URL)) {
            webView.loadUrl(props.getString(PROP_URL));
        }
        if (props.hasKey(PROP_HTML)) {
            String html = props.getString(PROP_HTML);
            if (props.hasKey(PROP_CSS)) {
                String css = props.getString(PROP_CSS);
                html = "<link rel=\"stylesheet\" type=\"text/css\" href=\"" + css + "\" />" + html;
            }
            webView.loadData(html, "text/html; charset=utf-8", "UTF-8");
        }
    }
}

注册 ReactWebViewManager 到 ReactInstanceManager 中，ReactInstanceManager 在 MainActivity 实例化

js 封装成模块

class ObservableWebView extends React.Component {
  render() {
    return <RCTWebView {...this.props}  />;
  }
}
ObservableWebView.propTypes = {
  url: PropTypes.string,
  html: PropTypes.string,
  css: PropTypes.string,
};
var RCTWebView = requireNativeComponent('RCTWebView', ObservableWebView);
module.exports = ObservableWebView;

最后使用

var MyWebView = require('./WebView');

web 特性

/data/data/com.rctzhihudaily/ 目录（手机需要 Root 才能看到）下 files 文件夹下的 ReactNativeDevBundle.js 是 js 源码。

潜在的特性——在线更新，当然涉及到在线 native code 的，还是需要版本更新。