reactXp
- Author: 林培豪
- Date: 2017.04.17
- Link: reactXp
XP means X-Platform
Share most of your code between the web, iOS, Android, and Windows.
COMPONENTS
- ActivityIndicator
- Button
- GestureView
- Image
- Link
- Navigator
- Picker
- ScrollView
- Text
- TextInput
- View
- WebView
-
- 这里的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
通过运行tsconfig.json文件，将文件打包成为js文件，到dist目录
但是并不会打包资源目录，所以资源目录需要自己copy过去
程序入口文件
index.tsx
import RX = require('reactxp');
import App = require('./App');
RX.App.initialize(true, true);
RX.UserInterface.setMainView(整合react-navigation
- 由于官方文档不全，对于自带的navigation并没有对应介绍，所以这里我使用了react-navigation。
- 并将store整合进入
-
- 现阶段有一个无法解决的问题就是，没办法在非界面的位置（例如，reducer）内进行路由跳转。
const App = StackNavigator({
Home: { screen: Apps },
mall: { screen: Mall },
prizeDetails:{ screen: PrizeDetails },
});
class rootView extends Component {
static navigationOptions = {
title: 'Welcome',
};
render(): JSX.Element | null {
return (
);
}
}
export = rootView;
调用界面
this.props.navigation.navigate('mall');
控件调用
官方版本写法
import RX = require('reactxp');
可以换成以前的写法，不需要更改代码
import RX = require('reactxp'); //这一句不知道为何，去掉会出现错误
import {
View,
Text,
Link,
Animated,
Styles,
Component,
Button,
} from 'reactxp';
web版本
由于babel的配置及tsconfig配置的问题，直接将项目复制过来在web端还存在一些问题，并且官方并没有文档介绍，所以暂时还无法解决。
结言
暂时感觉还只是一个比较简陋的版本，甚至连CLI都没有，感觉暂时还无法在实际项目中使用，坑实在有点多，文档非常不完善，例子程序也没内容