reactXp

• Author: 林培豪
• Date: 2017.04.17
• Link: <a href="https://microsoft.github.io/reactxp/" target="_blank">reactXp</a>

---

XP means X-Platform

Share most of your code between the web, iOS, Android, and Windows.

---

COMPONENTS

• <a href="https://microsoft.github.io/reactxp/docs/components/activityindicator.html" target="_blank">ActivityIndicator</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/button.html" target="_blank">Button</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/gestureview.html" target="_blank">GestureView</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/image.html" target="_blank">Image</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/link.html" target="_blank">Link</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/navigator.html" target="_blank">Navigator</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/picker.html" target="_blank">Picker</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/scrollview.html" target="_blank">ScrollView</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/text.html" target="_blank">Text</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/textinput.html" target="_blank">TextInput</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/view.html" target="_blank">View</a>
• <a href="https://microsoft.github.io/reactxp/docs/components/webview.html" target="_blank">WebView</a>

• • 这里的Button = TouchableOpacity

---

APIS

• Accessibility
• Alert
• App
• Clipboard
• Input
• Linking
• Location
• Modal
• Network
• Platform
• Popup
• Profiling
• StatusBar
• Storage
• UserInterface
• UserPresence

• • 没有Dimensions， Dimensions.get('window') = UserInterface.measureWindow()

---

项目搭建

由于reactXp并没有发布CLI工具，所有目前可以从GitHub上clone项目，然后把simple项目单独拿出来，进行修改。

RXPHelloWorld 运行

我们可以通过修改 App.tsx， 进行我们需要修改的功能.

安装依赖

• Run npm install. This fetches the dependencies.

运行 Web

• 运行 npm run web-watch. 打包运行文件
• 直接打开 index.html .

运行android跟ios

• 运行 npm run rn-watch. 打包运行文件.
• 在另一个终端运行 npm start.
• 直接在xCode或者AS运行程序.

---

运行指令

• "web-watch": "webpack --progress --colors --watch"
• "rn-watch": "tsc --watch"
• "start": "node node_modules/react-native/local-cli/cli.js start"

rn-watch

通过运行<a href="https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tsconfig.json.html" target="_blank">tsconfig.json</a>文件，将文件打包成为js文件，到dist目录

但是并不会打包资源目录，所以资源目录需要自己copy过去

---

程序入口文件

index.tsx

import RX = require('reactxp');
import App = require('./App');

RX.App.initialize(true, true);
RX.UserInterface.setMainView(<App />);

---

整合react-navigation

• 由于官方文档不全，对于自带的navigation并没有对应介绍，所以这里我使用了react-navigation。
• 并将store整合进入
• • 现阶段有一个无法解决的问题就是，没办法在非界面的位置（例如，reducer）内进行路由跳转。

const App = StackNavigator({
  Home: { screen: Apps },
  mall: { screen: Mall },
  prizeDetails:{ screen: PrizeDetails },
});

class rootView extends Component<null, null> {
    static navigationOptions = {
      title: 'Welcome',
    };

    render(): JSX.Element | null {
        return (
          <Provider store={store}>
            <View style={ {flex:1} }>
              <App />
            </View>
          </Provider>
        );
    }
}

export = rootView;

调用界面

this.props.navigation.navigate('mall');

---

控件调用

官方版本写法

import RX = require('reactxp');

<RX.View/>

可以换成以前的写法，不需要更改代码

import RX = require('reactxp');  //这一句不知道为何，去掉会出现错误
import {
  View,
  Text,
  Link,
  Animated,
  Styles,
  Component,
  Button,
} from 'reactxp';

---

web版本

由于babel的配置及tsconfig配置的问题，直接将项目复制过来在web端还存在一些问题，并且官方并没有文档介绍，所以暂时还无法解决。

结言

暂时感觉还只是一个比较简陋的版本，甚至连CLI都没有，感觉暂时还无法在实际项目中使用，坑实在有点多，文档非常不完善，例子程序也没内容