https://github.com/hugohua/react-native-demo
a react native app for tmall 3c home page
https://github.com/hugohua/react-native-demo
Last synced: about 1 year ago
JSON representation
a react native app for tmall 3c home page
- Host: GitHub
- URL: https://github.com/hugohua/react-native-demo
- Owner: hugohua
- Created: 2015-04-06T12:22:00.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-08-31T01:37:14.000Z (almost 10 years ago)
- Last Synced: 2024-11-16T02:32:46.321Z (over 1 year ago)
- Language: Java
- Homepage: http://www.ghugo.com
- Size: 19.9 MB
- Stars: 412
- Watchers: 24
- Forks: 153
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- ReactNativeMaterials - react-native-demo
README
# React Native Demo
## 如何运行
1. 先确保你已安装好了React Native 所需的依赖环境
2. 在根目录下执行 `npm install`
3. 再执行 `npm start`
4. 最后在`Xcode`中点击`run` 运行 或者按 `command + R`
### 可能遇到的问题
#### error 1003 错误
在家开着VPN写代码，一般会遇到该问题，解决方法：
打开项目中的`AppDelegate.m`，找到这行代码：`jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]`，将`localhost`换成自己的`ip`
## 一点经验
### 图片自适应
react native 中，图片必须明确写明大小值，不然无法显示，同时`width : '100%''`,这种写法不支持。
如果需要自适应，有几种做法：
* 只写高度值，不写宽度值，外层容器使用`flex`来做好布局，再配合`resizeMode`实现图片自适应即可。
例子1 :
```
```
例子2 :
```
```
* 使用`Dimensions`来获取设备viewport的宽高
```
var Dimensions = require('Dimensions');
var { width, height } = Dimensions.get('window');
var image = (
);
```
## 关于layout-css
react-native(rn)中使用`flex`来布局，目前使用来看，配合`positon : 'absolute'`是能够满足基本页面布局需求的。
但是`rn`中没有`zIndex`，也没有`position : 'fixed'`，在复杂的页面布局中，会稍微有点麻烦，但还是能实现类似的效果。
`rg`中只实现了css中很小的一个子集，还有很多属性值无法使用，并且属性写法繁琐，如在web中的css 如果要写`padding : 10px 5px 15px 20px`,在`ng`中则全部要分开属性写:`paddingTop : 10,paddingRight : 5 ...` 感觉一夜回到解放前。。
`positon : 'absolute'`定位方式是相对于父级元素，不管父级是否具有`relative`。
## 最终效果图
