> 今天在翻译React native官方网站的文章时,发现了一个好东西,可以在线编辑React native程序,且可以查看运行效果,是不是比较炫酷?
## 网址
[React Native Playground](https://rnplay.org/)
打开后默认界面如下:
![](https://box.kancloud.cn/2016-01-07_568e13f34915d.jpg)
## 创建应用
登陆成功后,选择`NEW APP`菜单创建自己的APP,然后会出现如下界面:
![](https://box.kancloud.cn/2016-01-07_568e13f34915d.jpg)
然后我们点击右边的设备,可以查看效果:
![](https://box.kancloud.cn/2016-01-07_568e13f37b08c.jpg)
## 修改
在面板左边的在线编辑器中进行修改后,按Ctrl+s时会实时的将效果显示在右边的设备中:
![](https://box.kancloud.cn/2016-01-07_568e13f3aa2a8.jpg)
## 总结
这个网站我想能帮助很多没有mac设备的同学也能一睹react-native的尊容,也不用再配繁杂的环境了。
- 前言
- react-native试玩(1)
- react-native试玩(2)
- (3)-窥探开发者选项
- (4)-新建项目
- (5)-小菊花控件
- (6)-日期选择控件
- (7)-图片控件
- (8)-列表视图
- (9)-地图视图
- (10)-导航栏
- (11)-模态
- (12)-iOS中导航栏
- (13)-选择控件
- (14)-iOS中进度栏
- (15)-滚动视图
- (16)-iOS分段控制控件
- (17)-iOS中的滑动条
- (18)-开关控件
- (19)-分页栏
- (20)-分页栏中的元素
- (21)-文本控件
- (22)-文本输入框
- (23)-触摸高亮
- (24)-触摸模糊
- (25)-触摸无反馈
- (26)-网页视图
- (27)-上拉菜单API
- (28)-弹出框API
- (29)-React Native Playground
- (30)-应用状态API
- (31)-访问相册API
- (32)-推送通知API
- (33)-状态栏API
- (34)-配置Android开发环境
- (35)-react-native-icons插件