vanex 同样支持在 ReactNative 中使用，有所不同的是 start API 只能返回一个组件，而不能直接用于渲染，参见 用于开发组件。

使用

由于 ReactNative 默认不支持注解，请先

yarn add babel-plugin-transform-decorators-legacy --dev
yarn add vanex

然后把 .babelrc 更新为

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

然后使用方式和在 React 使用差别不大，唯一的区别是 start 只返回一个组件而不负责渲染。

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Button,
} from 'react-native';

import {vanex, start} from 'vanex';

const appModel = {
  name: 'appModel',
  data: {
    count: 0,
  },
};

@vanex('appModel')
export default class VanexReactNativeExample extends Component {
  render() {
    const handleClick = () => {
      this.appModel.count ++;
    }
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Vanex & React Native!
        </Text>
        <Button
          onPress={handleClick}
          title={'ClickMe: +' + this.appModel.count}
          color="#841584"
          accessibilityLabel="click"
        />

      </View>
    );
  }
}

const ContainerComponent = start({
  component: VanexReactNativeExample,
  models: {
    appModel,
  },
});

AppRegistry.registerComponent('VanexReactNativeExample', () => ContainerComponent);