{"id":19571695,"url":"https://github.com/yued-fe/react-native-qidian","last_synced_at":"2026-04-13T08:32:06.390Z","repository":{"id":112027179,"uuid":"96843853","full_name":"yued-fe/react-native-qidian","owner":"yued-fe","description":"基于React-Native的起点App ","archived":false,"fork":false,"pushed_at":"2018-08-08T08:07:40.000Z","size":629,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-12T13:42:33.827Z","etag":null,"topics":["react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/yued-fe.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-11T02:53:31.000Z","updated_at":"2024-11-05T05:05:21.000Z","dependencies_parsed_at":"2023-04-01T07:22:58.828Z","dependency_job_id":null,"html_url":"https://github.com/yued-fe/react-native-qidian","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yued-fe/react-native-qidian","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Freact-native-qidian","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Freact-native-qidian/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Freact-native-qidian/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Freact-native-qidian/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yued-fe","download_url":"https://codeload.github.com/yued-fe/react-native-qidian/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yued-fe%2Freact-native-qidian/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31746101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T06:26:45.479Z","status":"ssl_error","status_checked_at":"2026-04-13T06:26:44.645Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["react-native"],"created_at":"2024-11-11T06:19:47.548Z","updated_at":"2026-04-13T08:32:06.372Z","avatar_url":"https://github.com/yued-fe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-qidian\n\n## 运行\n\n1、 git clone https://github.com/yued-fe/react-native-qidian.git\n\n2、 cd react-native-qidian \u0026\u0026 npm install\n\n3、 react-native run-ios\n\n\n## 第三方库\n\n1、 [react-native-swiper](https://github.com/leecade/react-native-swiper)\n\n2、 [react-native-storage](https://github.com/sunnylqm/react-native-storage)\n\n3、 [react-native-tab-navigator](https://github.com/happypancake/react-native-tab-navigator)\n\n4、 [react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view)\n\n5、 [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\n\n\n## JS目录\n\n```\n├── actions                     //redux相关（预留）\n│   ├── actionTypes.js\n│   └── requestIndexData.js\n├── animation                   //存放动画 \n│   └── myNavigatorScene.js\n├── api                         //统一管理restful api(预留)\n│   └── api.js\n├── app.js                      //入口文件\n├── common                      //一些通用的组件，和components的区别是，components需要是一个丢在任何项目都能run的组件，common偏业务\n│   ├── bottomBar.js            //底部菜单\n│   └── theme.js                //主题管理\n├── components                  //通用组件，尽量和业务无关\n│   ├── backPageComponent.js    //安卓回退组件（预留）\n│   ├── button.js               //按钮组件\n│   ├── loadFailTemplate.js     //加载失败模板\n│   └── loadingTemplate.js      //加载中模板\n├── native_modules              //与native通信模块\n│   ├── pushNative.js           //跳转到native\n│   └── splashScreen.js         //启动图\n├── page                        //业务页面\n│   ├── bookShelf.js\n│   ├── find.js\n│   ├── home.js\n│   ├── my.js\n│   └── sort.js \n├── persistence                 //本地缓存管理（预留）\n│   └── indexLocalData.js\n├── reducers                    //redux相关（预留）\n│   ├── index.js\n│   └── indexDataState.js\n├── res                         //资源文件\n│   ├── font                    //字体文件，添加字体需要在端做相应添加\n│   │   ├── config.json\n│   │   └── fontello.ttf\n│   └── img                     //图片\n├── store                       //redux相关（预留）\n│   └── index.js\n└── utils                       //工具类\n    ├── fetchUtil.js\n    ├── formatUtil.js\n    ├── pxtodpUtil.js\n    └── toastUtil.js\n```\n\n## 约定\n\n1、 使用[pxtodpUtil](https://github.com/yued-fe/react-native-qidian/blob/master/js/utils/pxtodpUtil.js)还原设计稿(目前定义为375px宽的设计稿)\n\n2、 使用[theme](https://github.com/yued-fe/react-native-qidian/blob/master/js/common/theme.js)管理公共样式（包括页面背景色、头部、底部、点击高亮等）\n\n3、 使用'1/PixelRatio.get()'的方式给borderWidth赋值\n\n4、 使用Platform适配android和ios的差异\n\n5、 本地存储的key值和id值不要用_\n\n\n## 例子\n\n### 数据请求\n\n数据请求需要写在InteractionManager.runAfterInteractions回调里，拿到数据后变更状态显示，注意一下几个生命周期的状态变化：\n\n```\nconstructor(props){\n    super(props);\n    this.state = {\n        didMount: false,\n        hasError: false\n    };\n}\ncomponentDidMount(){\n    InteractionManager.runAfterInteractions(() =\u003e {\n        this.fetchData();\n    });\n}\nfetchData() {\n    fetch('https://m.readnovel.com/majax/channel/new')\n        .then(response =\u003e response.json())\n        .then((result) =\u003e {\n            this.setState({\n                dataSource: this.state.dataSource.cloneWithRows(resData),\n                didMount: true\n            });\n        })\n        .catch((error)=\u003e{\n            this.setState({\n                didMount: false,\n                hasError: true\n            });\n        });\n}\nrender() {\n    return ({\n    \tthis.state.didMount ?\n            \u003cListView\n                style={styles.content}\n                dataSource={this.state.dataSource}\n                renderRow={(rowData,sectionId,rowId) =\u003e this._renderRow(rowData,sectionId,rowId)}\n                automaticallyAdjustContentInsets={false}\n            /\u003e\n            :\n            this.state.hasError ?\n                \u003cLoadFailTemplate/\u003e\n                :\n                \u003cLoadingTemplate/\u003e\n\t})\n}\n```\n\n### 本地存储\n\n我在[app.js](https://github.com/yued-fe/react-native-qidian/blob/master/js/app.js)中已经注册了一个全局的storage，业务页面直接使用即可，看下面的代码：\n\n```\nthis.KEY = 'YWQDNEW';//定义key，不要用_\n\n/*\n* 为了二次加载时不用再出loading，在componentWillMount（render前）时判断有本地数据，就给数据赋值，直接渲染数据，就可实现秒出\n*/\ncomponentWillMount(){\n    //获取数据使用storage.load\n    storage.load({\n        key: this.KEY,\n        syncInBackground: false\n    }).then(result =\u003e {\n        let resData = [{categoryName:\"大神新书\",subList:[],more:\"\"},{categoryName:\"最新上架\",subList:[],more:\"\"},{categoryName:\"畅销新书\",subList:[],more:\"\"}];\n        resData[0].subList = result.data.ds;\n        resData[0].more = result.data.dsMore;\n        resData[1].subList = result.data.new;\n        resData[1].more = result.data.newMore;\n        resData[2].subList = result.data.hot;\n        resData[2].more = result.data.hotMore;\n        this.setState({\n            dataSource: this.state.dataSource.cloneWithRows(resData),\n            didMount: true,\n            hasLocalData: true\n        });\n    }).catch(err =\u003e {\n    })\n}\n\ncomponentDidMount(){\n    InteractionManager.runAfterInteractions(() =\u003e {\n        if(!this.state.hasLocalData){\n            this.fetchData();\n        }\n    });\n}\n\nfetchData() {\n    fetch('https://m.readnovel.com/majax/channel/new')\n        .then(response =\u003e response.json())\n        .then((result) =\u003e {\n        \t//请求成功则保存数据，使用storage.save\n            storage.save({\n                key: this.KEY,\n                data: result,\n                expires: 1000 * 3600\n            });\n        })\n        .catch((error)=\u003e{\n        });\n}\n```\n涉及到一个页面多条数据，则还要设计一个id的参数\n\n```\nstorage.save({\n    key: this.KEY,\n    id: bookId,\n    data: result,\n    expires: 1000 * 3600\n});\n```\n更多使用可见[react-native-storage](https://github.com/sunnylqm/react-native-storage)\n\n## 组件库文档\n\n[文档](https://github.com/yued-fe/react-native-qidian/tree/master/readme/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyued-fe%2Freact-native-qidian","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyued-fe%2Freact-native-qidian","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyued-fe%2Freact-native-qidian/lists"}