{"id":13750164,"url":"https://github.com/hugohua/react-native-demo","last_synced_at":"2025-05-09T15:31:54.097Z","repository":{"id":29934428,"uuid":"33480640","full_name":"hugohua/react-native-demo","owner":"hugohua","description":"a react native app for tmall 3c home page","archived":false,"fork":false,"pushed_at":"2016-08-31T01:37:14.000Z","size":20858,"stargazers_count":412,"open_issues_count":6,"forks_count":153,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-11-16T02:32:46.321Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.ghugo.com","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hugohua.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-06T12:22:00.000Z","updated_at":"2024-05-30T12:38:14.000Z","dependencies_parsed_at":"2022-09-10T18:22:16.782Z","dependency_job_id":null,"html_url":"https://github.com/hugohua/react-native-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugohua%2Freact-native-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugohua%2Freact-native-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugohua%2Freact-native-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hugohua%2Freact-native-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hugohua","download_url":"https://codeload.github.com/hugohua/react-native-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275610,"owners_count":21882336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T08:00:22.956Z","updated_at":"2025-05-09T15:31:51.308Z","avatar_url":"https://github.com/hugohua.png","language":"Java","funding_links":[],"categories":["JavaScript","开源App"],"sub_categories":[],"readme":"# React Native Demo\n\n\n## 如何运行\n\n1. 先确保你已安装好了React Native 所需的依赖环境\n2. 在根目录下执行 `npm install`\n3. 再执行 `npm start`\n4. 最后在`Xcode`中点击`run` 运行 或者按 `command + R`\n\n### 可能遇到的问题\n\n#### error 1003 错误\n\n在家开着VPN写代码，一般会遇到该问题，解决方法： \n\n打开项目中的`AppDelegate.m`，找到这行代码：`jsCodeLocation = [NSURL URLWithString:@\"http://localhost:8081/index.ios.bundle\"]`，将`localhost`换成自己的`ip`\n\n\n## 一点经验\n\n### 图片自适应\n\nreact native 中，图片必须明确写明大小值，不然无法显示，同时`width : '100%''`,这种写法不支持。\n\n如果需要自适应，有几种做法：\n\n* 只写高度值，不写宽度值，外层容器使用`flex`来做好布局，再配合`resizeMode`实现图片自适应即可。\n\t\n\t例子1 : \n\t\n\t```\n\t\u003cView style={{flex : 1,borderRightWidth : 1,borderRightColor: '#eeeeee'}}\u003e\n                    \u003cImage style={{height: 110,resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} /\u003e\n                \u003c/View\u003e\n\t```\n\t例子2 :\n\t\n\t```\n\t\u003cView style={{\n\t  flex: 1,\n\t  alignItems: 'stretch',\n\t}}\u003e\n\t  \u003cImage ssource={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} style={{ flex: 1 }} /\u003e\n\t\u003c/View\u003e\n\t```\n\t\n* 使用`Dimensions`来获取设备viewport的宽高\n\n\t```\n\tvar Dimensions = require('Dimensions');\n\tvar { width, height } = Dimensions.get('window');\n\tvar image = (\n\t  \u003cImage style={{width: width, height: 100 }} source={{uri: 'http://gtms01.alicdn.com/tps/i1/TB1nif8HpXXXXc6XVXXAyLxZVXX-320-188.jpg'}} /\u003e\n\t);\n\t```\n\n## 关于layout-css \n\nreact-native(rn)中使用`flex`来布局，目前使用来看，配合`positon : 'absolute'`是能够满足基本页面布局需求的。\n\n但是`rn`中没有`zIndex`，也没有`position : 'fixed'`，在复杂的页面布局中，会稍微有点麻烦，但还是能实现类似的效果。\n\n`rg`中只实现了css中很小的一个子集，还有很多属性值无法使用，并且属性写法繁琐，如在web中的css 如果要写`padding : 10px 5px 15px 20px`,在`ng`中则全部要分开属性写:`paddingTop : 10,paddingRight : 5 ...` 感觉一夜回到解放前。。\n\n`positon : 'absolute'`定位方式是相对于父级元素，不管父级是否具有`relative`。\n\n\n## 最终效果图\n\n![image](http://img3.tbcdn.cn/5476e8b07b923/TB1QzADHpXXXXXFXFXXXXXXXXXX)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugohua%2Freact-native-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhugohua%2Freact-native-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhugohua%2Freact-native-demo/lists"}