├── Example ├── .watchmanconfig ├── .babelrc ├── ios │ ├── Example │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ ├── 周期.imageset │ │ │ │ ├── 周期.png │ │ │ │ └── Contents.json │ │ │ ├── 宝宝.imageset │ │ │ │ ├── 宝宝.png │ │ │ │ └── Contents.json │ │ │ ├── 新闻.imageset │ │ │ │ ├── 新闻.png │ │ │ │ └── Contents.json │ │ │ ├── 跳转.imageset │ │ │ │ ├── 跳转.png │ │ │ │ └── Contents.json │ │ │ ├── 闹钟.imageset │ │ │ │ ├── 闹钟.png │ │ │ │ └── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── Controller │ │ │ ├── TestController.h │ │ │ ├── PushController.h │ │ │ ├── TestController.m │ │ │ └── PushController.m │ │ ├── Project │ │ │ ├── RN组件 │ │ │ │ ├── ReactView.h │ │ │ │ └── ReactView.m │ │ │ ├── RN需要组件 │ │ │ │ ├── PushNative.h │ │ │ │ ├── RCTPushViewManager.h │ │ │ │ ├── PushNative.m │ │ │ │ └── RCTPushViewManager.m │ │ │ └── 原生组件 │ │ │ │ ├── PushButton.h │ │ │ │ └── PushButton.m │ │ ├── main.m │ │ ├── Main │ │ │ ├── AppDelegate.h │ │ │ └── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── ExampleTests │ │ ├── Info.plist │ │ └── ExampleTests.m │ └── Example.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ └── Example.xcscheme ├── android │ ├── app │ │ ├── src │ │ │ └── main │ │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ └── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── assets │ │ │ │ └── fonts │ │ │ │ │ ├── Entypo.ttf │ │ │ │ │ ├── Zocial.ttf │ │ │ │ │ ├── EvilIcons.ttf │ │ │ │ │ ├── Ionicons.ttf │ │ │ │ │ ├── Octicons.ttf │ │ │ │ │ ├── FontAwesome.ttf │ │ │ │ │ ├── Foundation.ttf │ │ │ │ │ └── MaterialIcons.ttf │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ ├── BUCK │ │ ├── proguard-rules.pro │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── keystores │ │ ├── debug.keystore.properties │ │ └── BUCK │ ├── settings.gradle │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── .buckconfig ├── App │ ├── Page │ │ ├── SixPage │ │ │ ├── resource │ │ │ │ ├── main-normal.png │ │ │ │ ├── news-normal.png │ │ │ │ ├── main-selected.png │ │ │ │ └── news-selected.png │ │ │ ├── containers │ │ │ │ ├── 信息页_选择_icon.png │ │ │ │ ├── homeContainer.js │ │ │ │ ├── mainContainer.js │ │ │ │ └── detail.js │ │ │ ├── reducers │ │ │ │ ├── rootReducer.js │ │ │ │ └── homeReducer.js │ │ │ ├── common │ │ │ │ ├── common.js │ │ │ │ ├── LoadMoreFooter.js │ │ │ │ ├── Loading.js │ │ │ │ ├── utils.js │ │ │ │ └── HeaderView.js │ │ │ ├── actions │ │ │ │ ├── actionTypes.js │ │ │ │ └── homeAction.js │ │ │ ├── store │ │ │ │ └── store.js │ │ │ ├── Six.js │ │ │ ├── pages │ │ │ │ ├── HomeDetial.js │ │ │ │ └── Home.js │ │ │ └── base │ │ │ │ ├── root.js │ │ │ │ └── tabBarView.js │ │ ├── FivePage │ │ │ ├── Component │ │ │ │ ├── Resource │ │ │ │ │ ├── main-normal.png │ │ │ │ │ ├── news-normal.png │ │ │ │ │ ├── main-selected.png │ │ │ │ │ └── news-selected.png │ │ │ │ ├── Actions │ │ │ │ │ ├── Index.js │ │ │ │ │ ├── ActionTypes.js │ │ │ │ │ └── HomeAction.js │ │ │ │ ├── Reducers │ │ │ │ │ ├── RootReducer.js │ │ │ │ │ └── HomeReducer.js │ │ │ │ ├── Store │ │ │ │ │ └── Store.js │ │ │ │ ├── Common │ │ │ │ │ ├── HomeContainer.js │ │ │ │ │ ├── Request.js │ │ │ │ │ ├── ConnectComponent.js │ │ │ │ │ ├── Config.js │ │ │ │ │ └── Loading.js │ │ │ │ ├── Pages │ │ │ │ │ ├── Main │ │ │ │ │ │ ├── components │ │ │ │ │ │ │ ├── StatusBar.js │ │ │ │ │ │ │ ├── ListItem.js │ │ │ │ │ │ │ └── ActionButton.js │ │ │ │ │ │ ├── styles.js │ │ │ │ │ │ └── Main.js │ │ │ │ │ └── News │ │ │ │ │ │ ├── NewsDetail.js │ │ │ │ │ │ ├── News.js │ │ │ │ │ │ ├── NewsItem.js │ │ │ │ │ │ └── NewsList.js │ │ │ │ └── Base │ │ │ │ │ ├── Root.js │ │ │ │ │ └── TabBarView.js │ │ │ └── Five.js │ │ ├── ThreePage │ │ │ ├── PushButton.js │ │ │ └── Three.js │ │ ├── TwoPage │ │ │ ├── Component │ │ │ │ ├── Edit │ │ │ │ │ └── Edit.js │ │ │ │ ├── Picture │ │ │ │ │ └── Picture.js │ │ │ │ ├── Common │ │ │ │ │ ├── config.js │ │ │ │ │ └── request.js │ │ │ │ ├── List │ │ │ │ │ ├── item.js │ │ │ │ │ ├── VideoPlayerAndroid.js │ │ │ │ │ └── List.js │ │ │ │ └── Account │ │ │ │ │ └── Account.js │ │ │ ├── RTTabBar.js │ │ │ └── Two.js │ │ └── FourPage │ │ │ └── Four.js │ ├── Base │ │ ├── Demo.json │ │ ├── Component │ │ │ ├── test.js │ │ │ ├── Util.js │ │ │ └── leftNavBtn.js │ │ ├── App.js │ │ └── Root.js │ └── Root.js ├── __tests__ │ ├── index.ios.js │ └── index.android.js ├── index.ios.js ├── .gitignore ├── package.json ├── index.android.js └── .flowconfig ├── .idea ├── modules.xml ├── react-native-learn.iml ├── misc.xml └── workspace.xml └── README.md /Example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Example 4 | 5 | -------------------------------------------------------------------------------- /Example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/resource/main-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/SixPage/resource/main-normal.png -------------------------------------------------------------------------------- /Example/App/Page/SixPage/resource/news-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/SixPage/resource/news-normal.png -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Example/App/Page/SixPage/containers/信息页_选择_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/SixPage/containers/信息页_选择_icon.png -------------------------------------------------------------------------------- /Example/App/Page/SixPage/resource/main-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/SixPage/resource/main-selected.png -------------------------------------------------------------------------------- /Example/App/Page/SixPage/resource/news-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/SixPage/resource/news-selected.png -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /Example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/周期.imageset/周期.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/ios/Example/Images.xcassets/周期.imageset/周期.png -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/宝宝.imageset/宝宝.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/ios/Example/Images.xcassets/宝宝.imageset/宝宝.png -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/新闻.imageset/新闻.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/ios/Example/Images.xcassets/新闻.imageset/新闻.png -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/跳转.imageset/跳转.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/ios/Example/Images.xcassets/跳转.imageset/跳转.png -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/闹钟.imageset/闹钟.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/ios/Example/Images.xcassets/闹钟.imageset/闹钟.png -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Resource/main-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/FivePage/Component/Resource/main-normal.png -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Resource/news-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/FivePage/Component/Resource/news-normal.png -------------------------------------------------------------------------------- /Example/android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Resource/main-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/FivePage/Component/Resource/main-selected.png -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Resource/news-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/App/Page/FivePage/Component/Resource/news-selected.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeRabbitYu/react-native-learn/HEAD/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Actions/Index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/12/1. 3 | */ 4 | import * as home from './HomeAction'; 5 | export default { 6 | ...home, 7 | 8 | } 9 | -------------------------------------------------------------------------------- /Example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Actions/ActionTypes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/12/1. 3 | */ 4 | //主页actions 5 | export const FETCH_HOME_LIST = 'FETCH_HOME_LIST'; 6 | export const RECEIVE_HOME_LIST = 'RECEIVE_HOME_LIST'; 7 | export const RESET_STATE = 'RESET_STATE'; -------------------------------------------------------------------------------- /Example/ios/Example/Controller/TestController.h: -------------------------------------------------------------------------------- 1 | // 2 | // TestController.h 3 | // Example 4 | // 5 | // Copyright © 2016年 Facebook. All rights reserved. 6 | // 7 | 8 | #import 9 | 10 | 11 | @interface TestController : UIViewController 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/reducers/rootReducer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/11/30. 3 | */ 4 | import { combineReducers } from 'redux' 5 | import Home from './homeReducer'; 6 | 7 | 8 | export default rootReducer = combineReducers({ 9 | Home, 10 | }) 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Example/ios/Example/Project/RN组件/ReactView.h: -------------------------------------------------------------------------------- 1 | // 2 | // ReactView.h 3 | // Example 4 | // 5 | // Created by 郭洪安 on 2016/11/9. 6 | // Copyright © 2016年 Facebook. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface ReactView : UIView 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /Example/App/Base/Demo.json: -------------------------------------------------------------------------------- 1 | { 2 | "days": [{ 3 | "key": "1", 4 | "title": "计时器", 5 | "icon": "闹钟", 6 | "component": "Time" 7 | },{ 8 | "key" : "2", 9 | "title" : "购物", 10 | "icon": "闹钟", 11 | "component": "Time" 12 | }], 13 | "exclude": "node_modules" 14 | } -------------------------------------------------------------------------------- /Example/App/Root.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/7. 3 | */ 4 | import React, { Component } from 'react'; 5 | import App from './Base/App'; 6 | 7 | export default class Root extends Component { 8 | render() { 9 | return ( 10 | 11 | ) 12 | } 13 | } -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Reducers/RootReducer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/12/1. 3 | */ 4 | import { combineReducers } from 'redux'; 5 | import Home from './HomeReducer'; 6 | 7 | export default RootReducer = combineReducers({ 8 | Home, 9 | }); 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/common/common.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jsaon on 16/7/15. 3 | */ 4 | import {Dimensions} from 'react-native'; 5 | 6 | let window = { 7 | width: Dimensions.get('window').width, 8 | height: Dimensions.get('window').height, 9 | } 10 | export default { 11 | window: window, 12 | } -------------------------------------------------------------------------------- /Example/ios/Example/Controller/PushController.h: -------------------------------------------------------------------------------- 1 | // 2 | // PushController.h 3 | // Example 4 | // 5 | // Created by 郭洪安 on 2016/11/12. 6 | // Copyright © 2016年 Facebook. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface PushController : UIViewController 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Example/ios/Example/Project/RN需要组件/PushNative.h: -------------------------------------------------------------------------------- 1 | // 2 | // PushNative.h 3 | // Example 4 | // 5 | // Created by 郭洪安 on 2016/10/31. 6 | // Copyright © 2016年 Facebook. All rights reserved. 7 | // 8 | 9 | #import 10 | #import "RCTBridgeModule.h" 11 | 12 | @interface PushNative : NSObject 13 | 14 | @end 15 | -------------------------------------------------------------------------------- /Example/__tests__/index.ios.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.ios.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/actions/actionTypes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/11/30. 3 | */ 4 | //主页actions 5 | export const FETCH_HOME_LIST = 'FETCH_HOME_LIST'; 6 | export const RECEIVE_HOME_LIST = 'RECEIVE_HOME_LIST'; 7 | 8 | 9 | //分类页actions 10 | export const FETCH_MAIN_LIST = 'FETCH_MAIN_LIST'; 11 | export const RECEIVE_MAIN_LIST = 'RECEIVE_MAIN_LIST'; -------------------------------------------------------------------------------- /Example/__tests__/index.android.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import Index from '../index.android.js'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | const tree = renderer.create( 10 | 11 | ); 12 | }); 13 | -------------------------------------------------------------------------------- /Example/index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | 15 | import Root from './App/Root'; 16 | import Two from './App/Page/ThreePage/Three' 17 | 18 | 19 | AppRegistry.registerComponent('Example', () => Root); 20 | -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/周期.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "周期.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "version" : 1, 19 | "author" : "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/宝宝.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "宝宝.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "version" : 1, 19 | "author" : "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/新闻.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "新闻.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "version" : 1, 19 | "author" : "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/跳转.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "跳转.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "version" : 1, 19 | "author" : "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/闹钟.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "闹钟.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "version" : 1, 19 | "author" : "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /Example/ios/Example/Project/RN需要组件/RCTPushViewManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTPushViewManager.h 3 | // Example 4 | // 5 | // Created by 郭洪安 on 2016/11/14. 6 | // Copyright © 2016年 Facebook. All rights reserved. 7 | // 8 | 9 | #import "RCTViewManager.h" 10 | #import "PushButton.h" 11 | @interface RCTPushViewManager : RCTViewManager 12 | 13 | /** <#type#> */ 14 | @property (nonatomic, strong) PushButton *button; 15 | 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/store/store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/11/30. 3 | */ 4 | import {createStore , applyMiddleware} from 'redux'; 5 | import thunk from 'redux-thunk'; 6 | import rootReducer from '../reducers/rootReducer'; 7 | let createStoreWithMiddleware = applyMiddleware(thunk)(createStore); 8 | let store = createStoreWithMiddleware(rootReducer); 9 | // let state = store.getState(); 10 | // alert(state.Search.searchText) 11 | export default store; 12 | 13 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Store/Store.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/12/1. 3 | */ 4 | import { createStore, applyMiddleware} from 'redux'; 5 | import thunk from 'redux-thunk'; 6 | import RootReducer from '../Reducers/RootReducer'; 7 | 8 | let createStoreWithMiddleware = applyMiddleware(thunk)(createStore); 9 | let store = createStoreWithMiddleware(RootReducer); 10 | // let state = store.getState(); 11 | // alert(state.Search.searchText) 12 | export default store; -------------------------------------------------------------------------------- /Example/App/Page/SixPage/containers/homeContainer.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React, { Component } from 'react'; 4 | import {connect} from 'react-redux'; 5 | import Home from '../pages/Home'; 6 | 7 | class HomeContainer extends Component { 8 | render(){ 9 | return( 10 | 11 | ) 12 | } 13 | } 14 | 15 | export default connect((state) => { 16 | const {Home} = state; 17 | return{ 18 | Home 19 | } 20 | }) 21 | (HomeContainer); -------------------------------------------------------------------------------- /.idea/react-native-learn.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.brentvatne.react.ReactVideoPackage; 5 | 6 | public class MainActivity extends ReactActivity { 7 | 8 | /** 9 | * Returns the name of the main component registered from JavaScript. 10 | * This is used to schedule rendering of the component. 11 | */ 12 | @Override 13 | protected String getMainComponentName() { 14 | return "Example"; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Common/HomeContainer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/12/1. 3 | */ 4 | import React from 'react'; 5 | import {connect} from 'react-redux'; 6 | import Home from '../Pages/News/News'; 7 | 8 | class HomeContainer extends React.Component { 9 | render() { 10 | return ( 11 | 12 | ) 13 | } 14 | } 15 | 16 | export default connect((state) => { 17 | const { Home } = state; 18 | return { 19 | Home 20 | } 21 | }) 22 | (HomeContainer); -------------------------------------------------------------------------------- /Example/App/Page/SixPage/Six.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import {Provider} from 'react-redux'; 9 | import store from './store/store'; 10 | 11 | import Root from './base/root' 12 | 13 | export default class Six extends Component { 14 | render() { 15 | 16 | return ( 17 | 18 | 19 | 20 | ); 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /Example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'Example' 2 | 3 | include ':app' 4 | include ':react-native-vector-icons' 5 | project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 6 | include ':react-native-image-picker' 7 | project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android') 8 | include ':react-native-video' 9 | project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android') 10 | -------------------------------------------------------------------------------- /Example/ios/Example/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | *.iml 28 | .idea 29 | .gradle 30 | local.properties 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | 37 | # BUCK 38 | buck-out/ 39 | \.buckd/ 40 | android/app/libs 41 | android/keystores/debug.keystore 42 | -------------------------------------------------------------------------------- /Example/ios/Example/Main/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | // 创建一个原生的导航条 17 | @property (nonatomic, strong) UINavigationController *nav; 18 | 19 | @end 20 | -------------------------------------------------------------------------------- /Example/ios/Example/Project/原生组件/PushButton.h: -------------------------------------------------------------------------------- 1 | // 2 | // PushButton.h 3 | // Example 4 | // 5 | // Copyright © 2016年 Facebook. All rights reserved. 6 | // 7 | 8 | #import 9 | 10 | #import "RCTComponent.h" 11 | 12 | // 这是一个封装好的react-native页面 13 | 14 | @protocol PushButtonClickedDelegate 15 | 16 | - (void)ButtonClicked; 17 | 18 | @end 19 | 20 | @interface PushButton : UIButton 21 | 22 | @property (nonatomic, copy) NSString * btnTitle;//分享的文本 23 | /** button点击事件 */ 24 | @property (nonatomic, copy) RCTBubblingEventBlock onButtonClicked; 25 | 26 | @property (nonatomic, strong) id ClickDelagate; 27 | 28 | @end 29 | 30 | -------------------------------------------------------------------------------- /Example/App/Base/Component/test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/11. 3 | */ 4 | 5 | import React, { Component } from 'react'; 6 | import { 7 | AppRegistry, 8 | StyleSheet, 9 | Text, 10 | View 11 | } from 'react-native'; 12 | class TestDemo extends Component { 13 | render() { 14 | 15 | 16 | var map = { 17 | "arrow": "62976", 18 | "checked": "62977", 19 | "checked-s": "62978", 20 | "tag-svip": "62995" 21 | }; 22 | } 23 | } 24 | var map = {"arrow":"58885","checked":"58885","checked-s":"62978","tag-svip":"62995"}; 25 | 26 | module.exports = (name)=>String.fromCharCode(map[name]); 27 | module.exports.map = map; -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/Main/components/StatusBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jale on 16/6/3. 3 | */ 4 | 5 | import React, {Component} from 'react'; 6 | import { 7 | View,Text 8 | } from 'react-native'; 9 | 10 | import {styles,constants} from '../styles' 11 | 12 | class StatusBar extends React.Component { 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | {this.props.title} 19 | 20 | 21 | ); 22 | } 23 | } 24 | 25 | export {StatusBar} -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Five.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/11/23. 3 | */ 4 | /** 5 | * Sample React Native App 6 | * https://github.com/facebook/react-native 7 | * @flow 8 | */ 9 | 10 | import React, { Component } from 'react'; 11 | import { Provider } from 'react-redux'; 12 | import Store from './Component/Store/Store'; 13 | 14 | import Root from './Component/Base/Root'; 15 | 16 | export default class Five extends Component { 17 | 18 | render() { 19 | return ( 20 | 21 | 22 | 23 | ); 24 | } 25 | } 26 | 27 | 28 | // AppRegistry.registerComponent('Five', () => Five); 29 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/Main/components/ListItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jale on 16/6/3. 3 | */ 4 | import React, {Component} from 'react'; 5 | import { 6 | View,TouchableHighlight,Text 7 | } from 'react-native'; 8 | 9 | 10 | import {styles,constants} from '../styles' 11 | 12 | class ListItem extends React.Component { 13 | render() { 14 | return ( 15 | 16 | 17 | {this.props.item.title} 18 | 19 | 20 | ); 21 | } 22 | } 23 | 24 | export {ListItem} -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Common/Request.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/14. 3 | */ 4 | 'use strict' 5 | import queryString from 'query-string'; 6 | 7 | let request = { 8 | get:(url ,params , successCallBack , failCallBack) =>{ 9 | if (params){ 10 | url += '&' + queryString.stringify(params) 11 | } 12 | console.log(url); 13 | return fetch(url) 14 | .then((response) => response.json()) 15 | .then((response) => { 16 | successCallBack(response); 17 | }) 18 | .catch ((error) => { 19 | failCallBack(error); 20 | }); 21 | } 22 | }; 23 | 24 | module.exports = request; 25 | -------------------------------------------------------------------------------- /Example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Example/App/Page/ThreePage/PushButton.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/11/17. 3 | */ 4 | import React, { Component, PropTypes } from 'react'; 5 | import { 6 | requireNativeComponent 7 | } from 'react-native'; 8 | 9 | var PushManager = requireNativeComponent('RCTPushView', PushView); 10 | 11 | 12 | export default class PushView extends Component { 13 | 14 | static propTypes = { 15 | /** 16 | * 17 | * 定义组件需要传到原生端的属性 18 | * 使用React.PropTypes来进行校验 19 | */ 20 | //Button的title 21 | btnTitle:PropTypes.string, 22 | //按钮点击事件 23 | onButtonClicked:PropTypes.func, 24 | 25 | }; 26 | 27 | render() { 28 | return ( 29 | 30 | ); 31 | } 32 | } -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Common/ConnectComponent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 作者：paozi 3 | * 创建：2016/10/16 4 | * 修改： 5 | * 描述：容器连接 6 | */ 7 | import { connect } from 'react-redux'; 8 | import { bindActionCreators } from 'redux'; 9 | import actions from '../Actions/Index'; 10 | 11 | 12 | const options = { 13 | withRef: true 14 | }; 15 | 16 | 17 | export default function connectComponent({ mapStateToProps, mapDispatchToProps, mergeProps, LayoutComponent }) { 18 | return connect( 19 | mapStateToProps || function (state) { 20 | return {}; 21 | }, 22 | mapDispatchToProps || function (dispatch) { 23 | return { 24 | actions: bindActionCreators(actions, dispatch) 25 | } 26 | }, 27 | mergeProps, 28 | options 29 | )(LayoutComponent); 30 | } 31 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/Main/components/ActionButton.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jale on 16/6/3. 3 | */ 4 | import React, { Component} from 'react'; 5 | import { 6 | View,TouchableHighlight,Text 7 | } from 'react-native'; 8 | 9 | 10 | import {styles,constants} from '../styles' 11 | 12 | class ActionButton extends Component { 13 | render() { 14 | return ( 15 | 16 | 19 | {this.props.title} 20 | 21 | 22 | ); 23 | } 24 | } 25 | 26 | export {ActionButton}; -------------------------------------------------------------------------------- /Example/ios/Example/Project/原生组件/PushButton.m: -------------------------------------------------------------------------------- 1 | // 2 | // PushButton.m 3 | // Example 4 | // 5 | // Copyright © 2016年 Facebook. All rights reserved. 6 | // 7 | 8 | #import "PushButton.h" 9 | 10 | @implementation PushButton 11 | 12 | - (instancetype) initWithFrame:(CGRect)frame{ 13 | if ((self = [super initWithFrame:frame])) { 14 | [self setTitle:@"Cain" forState:UIControlStateNormal]; 15 | [self addTarget:self action:@selector(click) 16 | forControlEvents:UIControlEventTouchUpInside]; 17 | } 18 | return self; 19 | } 20 | 21 | // 按钮分享事件 22 | - (void)click { 23 | NSLog(@"我是原生按钮点击事件呦"); 24 | [self.ClickDelagate ButtonClicked]; 25 | } 26 | 27 | - (void)setBtnTitle:(NSString *)btnTitle{ 28 | [self setTitle:btnTitle forState:(UIControlStateNormal)]; 29 | } 30 | 31 | 32 | @end 33 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/pages/HomeDetial.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | Component 3 | } from 'react'; 4 | import { 5 | StyleSheet, 6 | Text, 7 | Image, 8 | View, 9 | } from 'react-native'; 10 | import Common from '../common/common'; 11 | 12 | export default class HomeDetil extends Component { 13 | render() { 14 | const {rowDate} = this.props 15 | 16 | return ( 17 | 18 | 22 | 23 | ); 24 | } 25 | } 26 | const styles = StyleSheet.create({ 27 | thumbnail: { 28 | width: Common.window.width, 29 | height: Common.window.height, 30 | 31 | }, 32 | }) 33 | 34 | -------------------------------------------------------------------------------- /Example/ios/ExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/common/LoadMoreFooter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ljunb on 16/5/30. 3 | */ 4 | import React from 'react'; 5 | import { 6 | ActivityIndicator, 7 | View, 8 | Text, 9 | StyleSheet, 10 | } from 'react-native'; 11 | 12 | export default class LoadMoreFooter extends React.Component { 13 | render() { 14 | return ( 15 | 16 | 17 | 正在加载更多…… 18 | 19 | ) 20 | } 21 | } 22 | 23 | const styles = StyleSheet.create({ 24 | footer: { 25 | flexDirection: 'row', 26 | justifyContent: 'center', 27 | alignItems: 'center', 28 | height: 40, 29 | }, 30 | 31 | footerTitle: { 32 | marginLeft: 10, 33 | fontSize: 15, 34 | color: 'gray' 35 | } 36 | }) -------------------------------------------------------------------------------- /Example/App/Page/TwoPage/Component/Edit/Edit.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/13. 3 | */ 4 | import React, { Component } from 'react'; 5 | import { 6 | AppRegistry, 7 | StyleSheet, 8 | Text, 9 | View 10 | } from 'react-native'; 11 | 12 | export default class Edit extends Component { 13 | render() { 14 | return ( 15 | 16 | 17 | Edit 18 | 19 | 20 | ); 21 | } 22 | } 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | flex: 1, 27 | justifyContent: 'center', 28 | alignItems: 'center', 29 | backgroundColor: '#F5FCFF', 30 | }, 31 | welcome: { 32 | fontSize: 20, 33 | textAlign: 'center', 34 | margin: 10, 35 | }, 36 | }); 37 | -------------------------------------------------------------------------------- /Example/App/Page/TwoPage/Component/Picture/Picture.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/13. 3 | */ 4 | import React, { Component } from 'react'; 5 | import { 6 | AppRegistry, 7 | StyleSheet, 8 | Text, 9 | View 10 | } from 'react-native'; 11 | 12 | export default class Picture extends Component { 13 | render() { 14 | return ( 15 | 16 | 17 | Picture 18 | 19 | 20 | ); 21 | } 22 | } 23 | 24 | const styles = StyleSheet.create({ 25 | container: { 26 | flex: 1, 27 | justifyContent: 'center', 28 | alignItems: 'center', 29 | backgroundColor: '#F5FCFF', 30 | }, 31 | welcome: { 32 | fontSize: 20, 33 | textAlign: 'center', 34 | margin: 10, 35 | }, 36 | }); -------------------------------------------------------------------------------- /Example/App/Page/TwoPage/Component/Common/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/14. 3 | */ 4 | 'use strict' 5 | 6 | const config = { 7 | api:{ 8 | base:'http://rap.taobao.org/mockjsdata/8647/', 9 | list:'api/list', 10 | handle:'api/handle', 11 | comments:'api/comments',//评论数量 12 | comment:'api/comment', // 13 | signup:'api/user/signup',//发送验证码 14 | verify:'api/user/verify',// 登录验证 15 | }, 16 | map:{ 17 | method:'POST', 18 | header:{ 19 | 'Accept-Encoding':'gzip, deflate', 20 | 'Content-Type':'application/json', 21 | 'User-Agent':'11', 22 | 'X-Device-ID':'111', 23 | 'X-Ip':'111', 24 | 25 | }, 26 | // body:JSON.stringify(body), 27 | follow:20, 28 | timeout:8000, 29 | size:0 30 | }, 31 | 32 | }; 33 | 34 | module.exports = config; 35 | -------------------------------------------------------------------------------- /Example/ios/Example/Project/RN需要组件/PushNative.m: -------------------------------------------------------------------------------- 1 | // 2 | // PushNative.m 3 | // Example 4 | // 5 | // Copyright © 2016年 Facebook. All rights reserved. 6 | // 7 | 8 | #import "PushNative.h" 9 | #import "RCTBridge.h" 10 | 11 | #import "TestController.h" 12 | #import "AppDelegate.h" 13 | 14 | #import "RCTViewManager.h" 15 | 16 | @implementation PushNative 17 | 18 | RCT_EXPORT_MODULE() 19 | //RN跳转原生界面 20 | RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){ 21 | 22 | NSLog(@"RN传入原生界面的数据为:%@",msg); 23 | //主要这里必须使用主线程发送,不然有可能失效 24 | dispatch_async(dispatch_get_main_queue(), ^{ 25 | // [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:nil]; 26 | TestController *one = [[TestController alloc]init]; 27 | 28 | AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate]; 29 | 30 | [app.nav pushViewController:one animated:YES]; 31 | }); 32 | } 33 | 34 | @end 35 | -------------------------------------------------------------------------------- /Example/ios/Example/Project/RN需要组件/RCTPushViewManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTPushViewManager.m 3 | // Example 4 | // 5 | // Created by 郭洪安 on 2016/11/14. 6 | // Copyright © 2016年 Facebook. All rights reserved. 7 | // 8 | 9 | #import "RCTPushViewManager.h" 10 | 11 | @implementation RCTPushViewManager 12 | 13 | RCT_EXPORT_MODULE() 14 | @synthesize bridge = _bridge; 15 | 16 | - (UIView *)view 17 | { 18 | _button = [[PushButton alloc] initWithFrame:CGRectMake(0, 0, 0, 0)]; 19 | _button.ClickDelagate = self; 20 | return _button; 21 | 22 | } 23 | 24 | RCT_EXPORT_VIEW_PROPERTY(btnTitle, NSString) 25 | 26 | RCT_EXPORT_VIEW_PROPERTY(onButtonClicked, RCTBubblingEventBlock) 27 | 28 | 29 | - (void)ButtonClicked { 30 | NSInteger x = arc4random() % 100; 31 | NSLog(@"原生事件%ld",x); 32 | _button.onButtonClicked(@{@"randomValue": [NSNumber numberWithInteger:x]}); 33 | } 34 | 35 | - (dispatch_queue_t)methodQueue 36 | { 37 | return dispatch_get_main_queue(); 38 | } 39 | 40 | @end 41 | -------------------------------------------------------------------------------- /Example/App/Page/TwoPage/Component/Common/request.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/14. 3 | */ 4 | 'use strict' 5 | 6 | import Mock from 'mockjs'; 7 | import config from './config'; 8 | import queryString from 'query-string' 9 | import _ from 'lodash'; 10 | let request = { 11 | 12 | } 13 | 14 | // 设定params json对象 15 | request.get = (url,params) => { 16 | if(params){ 17 | url += '?' + queryString.stringify(params) 18 | } 19 | 20 | return fetch(url) 21 | .then((response) => response.json()) 22 | .then((response) => Mock.mock(response)) 23 | }; 24 | 25 | request.post = (url,body) => { 26 | 27 | // json对象的合并 工具:loadsh 28 | // config.map 合并 body 29 | let map = _.extend(config.map,{ 30 | body : JSON.stringify(body) 31 | }); 32 | 33 | 34 | return fetch(url,map) 35 | .then((response) => response.json()) 36 | .then((response) => Mock.mock(response)) 37 | 38 | }; 39 | 40 | module.exports = request; 41 | -------------------------------------------------------------------------------- /Example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /Example/ios/Example/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "20x20", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "20x20", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "29x29", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "29x29", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "40x40", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "40x40", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "size" : "60x60", 36 | "scale" : "2x" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "size" : "60x60", 41 | "scale" : "3x" 42 | } 43 | ], 44 | "info" : { 45 | "version" : 1, 46 | "author" : "xcode" 47 | } 48 | } -------------------------------------------------------------------------------- /Example/App/Base/Component/Util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/10. 3 | */ 4 | import React from 'react'; 5 | import { PixelRatio } from 'react-native'; 6 | import Dimensions from 'Dimensions'; 7 | 8 | const Util = { 9 | ratio: PixelRatio.get(), 10 | pixel: 1 / PixelRatio.get(), 11 | size: { 12 | width: Dimensions.get('window').width, 13 | height: Dimensions.get('window').height 14 | }, 15 | post(url, data, callback) { 16 | const fetchOptions = { 17 | method: 'POST', 18 | headers: { 19 | 'Accept': 'application/json', 20 | 'Content-Type': 'application/json' 21 | }, 22 | body: JSON.stringify(data) 23 | }; 24 | 25 | fetch(url, fetchOptions) 26 | .then((response) => { 27 | return response.json() 28 | }) 29 | .then((responseData) => { 30 | callback(responseData); 31 | }); 32 | }, 33 | }; 34 | export default Util; -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Common/Config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/14. 3 | */ 4 | 'use strict' 5 | 6 | const token ={ 7 | 'showapi_appid' : '27786', 8 | 'showapi_sign' : '8435f098f5b74384ba294790c7e8b503', 9 | }; 10 | 11 | const config = { 12 | 13 | api:{ 14 | homeList:'http://route.showapi.com/255-1?showapi_appid='+token.showapi_appid+ 15 | '&showapi_sign=' + token.showapi_sign 16 | }, 17 | map:{ 18 | method:'POST', 19 | header:{ 20 | 'Accept-Encoding':'gzip, deflate', 21 | 'Content-Type':'application/json', 22 | 'User-Agent':'11', 23 | 'X-Device-ID':'111', 24 | 'X-Ip':'111', 25 | 26 | }, 27 | // body:JSON.stringify(body), 28 | follow:20, 29 | timeout:8000, 30 | size:0 31 | }, 32 | }; 33 | 34 | // const token = { 35 | // 'showapi_appid' : '27786', 36 | // 'showapi_sign' : '8435f098f5b74384ba294790c7e8b503', 37 | // }; 38 | 39 | module.exports = config; 40 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/reducers/homeReducer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/11/30. 3 | */ 4 | import * as types from '../actions/actionTypes'; 5 | 6 | const initialState = { 7 | HomeList: [], 8 | isLoading: true, 9 | isLoadMore: false, 10 | isRefreshing: false, 11 | }; 12 | 13 | 14 | let homeReducer = (state = initialState , action) => { 15 | switch (action.type){ 16 | case types.FETCH_HOME_LIST: 17 | return Object.assign({},state , { 18 | isLoading:action.isLoading, 19 | isRefreshing:action.isRefreshing, 20 | isLoadMore:action.isLoadingMore 21 | }); 22 | case types.RECEIVE_HOME_LIST: 23 | return Object.assign({} , state, { 24 | HomeList: state.isLoadMore ? state.HomeList.concat(action.homeList) : action.homeList, 25 | isRefreshing:false, 26 | isLoading:false, 27 | }); 28 | default: 29 | return state; 30 | } 31 | }; 32 | 33 | export default homeReducer; 34 | 35 | -------------------------------------------------------------------------------- /Example/ios/Example/Project/RN组件/ReactView.m: -------------------------------------------------------------------------------- 1 | // 2 | // ReactView.m 3 | // Example 4 | // 5 | // Created by 郭洪安 on 2016/11/9. 6 | // Copyright © 2016年 Facebook. All rights reserved. 7 | // 8 | 9 | #import "ReactView.h" 10 | 11 | #import 12 | 13 | @implementation ReactView 14 | 15 | // 这是一个封装好的react-native页面 16 | 17 | - (instancetype)initWithFrame:(CGRect)frame 18 | { 19 | if (self = [super initWithFrame:frame]) { 20 | NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"; 21 | NSURL * jsCodeLocation = [NSURL URLWithString:strUrl]; 22 | // 这里的moduleName一定要和下面的index.ios.js里面的注册一样 23 | RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"Three" 25 | initialProperties:nil 26 | launchOptions:nil]; 27 | 28 | [self addSubview:rootView]; 29 | 30 | rootView.frame = self.bounds; 31 | } 32 | return self; 33 | } 34 | 35 | @end 36 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/common/Loading.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ljunb on 16/6/2. 3 | */ 4 | import React from 'react'; 5 | import { 6 | StyleSheet, 7 | View, 8 | Text, 9 | ActivityIndicator, 10 | } from 'react-native'; 11 | 12 | import Common from '../common/common'; 13 | 14 | export default class Loading extends React.Component { 15 | render() { 16 | return ( 17 | 18 | 19 | 加载中…… 20 | 21 | ) 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | loading: { 27 | backgroundColor: 'gray', 28 | height: 80, 29 | width: 100, 30 | borderRadius: 10, 31 | justifyContent: 'center', 32 | alignItems: 'center', 33 | position: 'absolute', 34 | top: (Common.window.height-80)/2, 35 | left: (Common.window.width-100)/2, 36 | }, 37 | 38 | loadingTitle: { 39 | marginTop: 10, 40 | fontSize: 14, 41 | color: 'white' 42 | } 43 | }) -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Common/Loading.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ljunb on 16/6/2. 3 | */ 4 | import React from 'react'; 5 | import { 6 | StyleSheet, 7 | View, 8 | Text, 9 | ActivityIndicator, 10 | } from 'react-native'; 11 | 12 | // import Common from '../common/common'; 13 | 14 | export default class Loading extends React.Component { 15 | render() { 16 | return ( 17 | 18 | 19 | 加载中…… 20 | 21 | ) 22 | } 23 | } 24 | 25 | const styles = StyleSheet.create({ 26 | loading: { 27 | backgroundColor: 'gray', 28 | height: 80, 29 | width: 100, 30 | borderRadius: 10, 31 | justifyContent: 'center', 32 | alignItems: 'center', 33 | position: 'absolute', 34 | // top: (Common.window.height-80)/2, 35 | // left: (Common.window.width-100)/2, 36 | }, 37 | 38 | loadingTitle: { 39 | marginTop: 10, 40 | fontSize: 14, 41 | color: 'white' 42 | } 43 | }) -------------------------------------------------------------------------------- /Example/App/Page/SixPage/common/utils.js: -------------------------------------------------------------------------------- 1 | 2 | let Util = { 3 | /* 4 | * fetch简单封装 5 | * url: 请求的URL 6 | * successCallback: 请求成功回调 7 | * failCallback: 请求失败回调 8 | * 9 | * */ 10 | get: (url, successCallback, failCallback) => { 11 | fetch(url) 12 | .then((response) => response.text()) 13 | .then((responseText) => { 14 | successCallback(JSON.parse(responseText)); 15 | }) 16 | .catch((err) => { 17 | failCallback(err); 18 | }); 19 | }, 20 | gets: (url, successCallback, failCallback) => { 21 | var request = new XMLHttpRequest(); 22 | request.onreadystatechange = (e) => { 23 | if (request.readyState !== 4) { 24 | return; 25 | } 26 | 27 | if (request.status === 200) { 28 | successCallback(JSON.parse(request.responseText)) 29 | 30 | } else { 31 | // console.warn('error'); 32 | } 33 | }; 34 | 35 | request.open('GET',url); 36 | request.send(); 37 | }, 38 | } 39 | 40 | export default Util; 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Reducers/HomeReducer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/12/1. 3 | */ 4 | import * as types from '../Actions/ActionTypes'; 5 | 6 | const initialState = { 7 | HomeList: [], 8 | isLoading: true, 9 | isLoadMore: false, 10 | isRefreshing: false, 11 | }; 12 | 13 | let HomeReducer = (state = initialState, action) => { 14 | 15 | switch (action.type) { 16 | case types.FETCH_HOME_LIST: 17 | return Object.assign({} , state ,{ 18 | isLoadMore:action.isLoadMore, 19 | isRefreshing:action.isRefreshing, 20 | isLoading:action.isLoading 21 | }); 22 | case types.RECEIVE_HOME_LIST: 23 | return Object.assign({} , state, { 24 | HomeList:state.isLoadMore ? state.HomeList.concat(action.homeList) : action.homeList, 25 | isRefreshing:false, 26 | isLoading:false, 27 | }); 28 | case types.RESET_STATE: 29 | return Object.assign({},state,{ 30 | HomeList:[], 31 | isLoading:true, 32 | }); 33 | default: 34 | return state; 35 | } 36 | }; 37 | 38 | export default HomeReducer; 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/example/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.ReactApplication; 7 | import com.oblador.vectoricons.VectorIconsPackage; 8 | import com.imagepicker.ImagePickerPackage; 9 | import com.facebook.react.ReactInstanceManager; 10 | import com.facebook.react.ReactNativeHost; 11 | import com.facebook.react.ReactPackage; 12 | import com.facebook.react.shell.MainReactPackage; 13 | 14 | import java.util.Arrays; 15 | import java.util.List; 16 | 17 | public class MainApplication extends Application implements ReactApplication { 18 | 19 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 20 | @Override 21 | protected boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | return Arrays.asList( 28 | new MainReactPackage(), 29 | new VectorIconsPackage(), 30 | new ImagePickerPackage() 31 | ); 32 | } 33 | }; 34 | 35 | @Override 36 | public ReactNativeHost getReactNativeHost() { 37 | return mReactNativeHost; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "lodash": "^4.16.4", 11 | "mockjs": "^1.0.1-beta3", 12 | "query-string": "^4.2.3", 13 | "react": "15.3.2", 14 | "react-native": "0.35.0", 15 | "react-native-button": "^1.7.1", 16 | "react-native-image-picker": "^0.22.12", 17 | "react-native-navbar": "^1.5.4", 18 | "react-native-scrollable-tab-view": "^0.6.0", 19 | "react-native-scrolling-menu": "^0.1.1", 20 | "react-native-swiper": "^1.5.2", 21 | "react-native-tab-navigator": "^0.3.3", 22 | "react-native-vector-icons": "^2.1.0", 23 | "react-native-video": "^0.9.0", 24 | "react-redux": "^4.4.6", 25 | "redux": "^3.6.0", 26 | "redux-thunk": "^2.1.0", 27 | "wilddog": "^2.3.8" 28 | }, 29 | "jest": { 30 | "preset": "jest-react-native" 31 | }, 32 | "devDependencies": { 33 | "babel-jest": "16.0.0", 34 | "babel-preset-react-native": "1.9.0", 35 | "jest": "16.0.1", 36 | "jest-react-native": "16.0.0", 37 | "react-test-renderer": "15.3.2", 38 | "redux-devtools": "^3.3.1", 39 | "whatwg-fetch": "1.0.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /Example/App/Base/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/7. 3 | */ 4 | import React from 'react'; 5 | import { 6 | AppRegistry, 7 | Navigator, 8 | View, 9 | StyleSheet, 10 | Text, 11 | Image, 12 | } from 'react-native'; 13 | 14 | html:5 15 | 16 | import Root from '../Base/Root'; 17 | 18 | export default class App extends React.Component { 19 | render(){ 20 | return( 21 | 22 | { 26 | if (route.sceneConfig) { 27 | return route.sceneConfig; 28 | } 29 | return Navigator.SceneConfigs.PushFromRight; 30 | } } 31 | renderScene={(route, navigator) => { 32 | let Component = route.component; 33 | return ( 34 | 36 | ) 37 | } 38 | } 39 | /> 40 | 41 | ) 42 | } 43 | } -------------------------------------------------------------------------------- /Example/index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | 15 | export default class Example extends Component { 16 | render() { 17 | return ( 18 | 19 | 20 | Welcome to React Native! 21 | 22 | 23 | To get started, edit index.android.js 24 | 25 | 26 | Double tap R on your keyboard to reload,{'\n'} 27 | Shake or press menu button for dev menu 28 | 29 | 30 | ); 31 | } 32 | } 33 | 34 | 35 | const styles = StyleSheet.create({ 36 | container: { 37 | flex: 1, 38 | justifyContent: 'center', 39 | alignItems: 'center', 40 | backgroundColor: '#F5FCFF', 41 | }, 42 | welcome: { 43 | fontSize: 20, 44 | textAlign: 'center', 45 | margin: 10, 46 | }, 47 | instructions: { 48 | textAlign: 'center', 49 | color: '#333333', 50 | marginBottom: 5, 51 | }, 52 | }); 53 | 54 | AppRegistry.registerComponent('Example', () => Example); 55 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/actions/homeAction.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import * as types from './actionTypes'; 4 | import Util from '../common/utils'; 5 | 6 | export let home = (tag, offest, limit, isLoadMore, isRefreshing, isLoading) => { 7 | let URL = 'http://api.huaban.com/fm/wallpaper/pins?limit='; 8 | if (limit) URL += limit; 9 | offest ? URL += '&max=' + offest : URL += '&max='; 10 | tag ? URL += '&tag=' + encode_utf8(tag) : URL += '&tag=' 11 | // console.log(URL) 12 | 13 | return dispatch => { 14 | dispatch(feachHomeList(isLoadMore, isRefreshing, isLoading)); 15 | return Util.get(URL, (response) => { 16 | // console.log(response) 17 | // debugger 18 | dispatch(receiveHomeList(response.pins)) 19 | }, (error) => { 20 | console.log('加载首页数据error==>' + error); 21 | // // debugger 22 | dispatch(receiveHomeList([])); 23 | }); 24 | 25 | } 26 | }; 27 | 28 | function encode_utf8(s) { 29 | return encodeURIComponent(s); 30 | } 31 | 32 | let feachHomeList = (isLoadMore, isRefreshing, isLoading) => { 33 | return { 34 | type: types.FETCH_HOME_LIST, 35 | isLoadMore: isLoadMore, 36 | isRefreshing: isRefreshing, 37 | isLoading: isLoading, 38 | } 39 | }; 40 | 41 | let receiveHomeList = (homeList) => { 42 | return { 43 | type: types.RECEIVE_HOME_LIST, 44 | homeList: homeList, 45 | } 46 | }; 47 | -------------------------------------------------------------------------------- /Example/App/Base/Component/leftNavBtn.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/10/11. 3 | */ 4 | import React, { Component } from 'react'; 5 | import { 6 | AppRegistry, 7 | StyleSheet, 8 | Text, 9 | View, 10 | TouchableOpacity, 11 | Image 12 | } from 'react-native'; 13 | 14 | import icon from './test'; 15 | // var Icon = require('react-native-vector-icons/FontAwesome'); 16 | 17 | var Icon = require('react-native-vector-icons/Ionicons'); 18 | 19 | export default class leftNavBtn extends Component { 20 | static defaultProps = { 21 | // 回调函数 22 | popToHome: null 23 | }; 24 | 25 | render() { 26 | const charmander = 'http://oyster.ignimgs.com/mediawiki/apis.ign.com/pokemon-blue-version/d/d4/Charmander.gif'; 27 | return ( 28 | 29 | 35 | {/**/} 36 | {/*{icon('arrow-back')}*/} 37 | {/**/} 38 | 39 | 40 | ); 41 | } 42 | popTopHome(){ 43 | this.props.popToHome(); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/containers/mainContainer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | 15 | export default class mainContainer extends Component { 16 | render() { 17 | return ( 18 | 19 | 20 | Welcome to React Native! 21 | 22 | 23 | To get started, edit index.android.js 24 | 25 | 26 | Double tap R on your keyboard to reload,{'\n'} 27 | Shake or press menu button for dev menu 28 | 29 | 30 | ); 31 | } 32 | } 33 | 34 | 35 | const styles = StyleSheet.create({ 36 | container: { 37 | flex: 1, 38 | justifyContent: 'center', 39 | alignItems: 'center', 40 | backgroundColor: '#F5FCFF', 41 | }, 42 | welcome: { 43 | fontSize: 20, 44 | textAlign: 'center', 45 | margin: 10, 46 | }, 47 | instructions: { 48 | textAlign: 'center', 49 | color: '#333333', 50 | marginBottom: 5, 51 | }, 52 | }); 53 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Actions/HomeAction.js: -------------------------------------------------------------------------------- 1 | import * as types from './ActionTypes'; 2 | import Request from '../Common/Request'; 3 | import Config from '../Common/Config'; 4 | 5 | let cacheResults = { 6 | items:[], 7 | allPage:0, 8 | currentPage:0 9 | }; 10 | 11 | let id = ''; 12 | 13 | export let Home = (page,type ,isLoadMore,isRefreshing,isLoading,blackArr) => { 14 | // let url = Config.api.homeList + '&page=' + page + '&type=' + id; 15 | let url = Config.api.homeList; 16 | 17 | // id = type; 18 | 19 | // console.log(id); 20 | // console.log(type); 21 | return dispatch => { 22 | dispatch(fetchHomeList(isLoading,isRefreshing,isLoadMore)); 23 | return Request.get(url,{ 24 | type:type, 25 | page:page, 26 | }, (response) => { 27 | // console.log(response.showapi_res_body.pagebean); 28 | 29 | blackArr(response.showapi_res_body.pagebean); 30 | 31 | }, (error) => { 32 | console.log(error); 33 | dispatch(receiveHomeList([])); 34 | }); 35 | } 36 | }; 37 | 38 | let fetchHomeList = (isLoadMore, isRefreshing, isLoading) => { 39 | return { 40 | type: types.FETCH_HOME_LIST, 41 | isLoadMore: isLoadMore, 42 | isRefreshing: isRefreshing, 43 | isLoading: isLoading, 44 | } 45 | }; 46 | 47 | let receiveHomeList = (homeList) => { 48 | console.log(homeList.length); 49 | return { 50 | type: types.RECEIVE_HOME_LIST, 51 | homeList: homeList, 52 | } 53 | }; 54 | 55 | let resetHomeList = (homeList) => { 56 | return{ 57 | type: types.RESET_STATE, 58 | homeList:homeList, 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /Example/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.example', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.example', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /Example/ios/Example/Controller/TestController.m: -------------------------------------------------------------------------------- 1 | // 2 | // TestController.m 3 | // Example 4 | // 5 | // Copyright © 2016年 Facebook. All rights reserved. 6 | // 7 | 8 | #import "TestController.h" 9 | #import "PushController.h" 10 | 11 | #import "AppDelegate.h" 12 | 13 | #define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width 14 | #define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height 15 | 16 | 17 | @interface TestController () 18 | 19 | @end 20 | 21 | @implementation TestController 22 | 23 | - (void)viewWillAppear:(BOOL)animated{ 24 | AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate]; 25 | [app.nav setNavigationBarHidden:NO animated:animated]; 26 | [super viewWillAppear:animated]; 27 | } 28 | 29 | - (void)viewWillDisappear:(BOOL)animated{ 30 | AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate]; 31 | [app.nav setNavigationBarHidden:YES animated:animated]; 32 | [super viewWillDisappear:animated]; 33 | } 34 | 35 | - (void)viewDidLoad { 36 | [super viewDidLoad]; 37 | 38 | self.navigationItem.title = @"我是原生页面哟~"; 39 | 40 | self.view.backgroundColor = [UIColor whiteColor]; 41 | 42 | 43 | UIButton *button = [UIButton buttonWithType:(UIButtonTypeCustom)]; 44 | button.frame = CGRectMake(SCREEN_WIDTH / 2 - 150, 80, 300, 80); 45 | button.backgroundColor = [UIColor redColor]; 46 | [button setTitle:@"点击我，跳转到React-Native页面" forState:(UIControlStateNormal)]; 47 | [button addTarget:self action:@selector(click) forControlEvents:(UIControlEventTouchUpInside)]; 48 | [self.view addSubview:button]; 49 | 50 | } 51 | 52 | - (void)click{ 53 | 54 | PushController *push = [[PushController alloc]init]; 55 | [self.navigationController pushViewController:push animated:YES]; 56 | } 57 | 58 | 59 | @end 60 | -------------------------------------------------------------------------------- /Example/ios/Example/Main/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "TestController.h" 13 | 14 | #import "RCTBundleURLProvider.h" 15 | #import "RCTRootView.h" 16 | 17 | @implementation AppDelegate 18 | 19 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 20 | { 21 | NSURL *jsCodeLocation; 22 | 23 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 24 | 25 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 26 | moduleName:@"Example" 27 | initialProperties:nil 28 | launchOptions:launchOptions]; 29 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 30 | 31 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 32 | UIViewController *rootViewController = [UIViewController new]; 33 | rootViewController.view = rootView; 34 | rootViewController.navigationItem.title = @"Hello World!"; 35 | 36 | // 初始化Nav 37 | _nav = [[UINavigationController alloc]initWithRootViewController:rootViewController]; 38 | _nav.navigationBarHidden = YES; 39 | self.window.rootViewController = _nav; 40 | [self.window makeKeyAndVisible]; 41 | 42 | 43 | 44 | 45 | return YES; 46 | } 47 | 48 | 49 | 50 | @end 51 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/base/root.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | Navigator 14 | } from 'react-native'; 15 | 16 | import TabBarView from './tabBarView'; 17 | 18 | export default class Root extends Component { 19 | render() { 20 | return ( 21 | 22 | { 26 | if (route.sceneConfig) { 27 | return route.sceneConfig; 28 | } 29 | return Navigator.SceneConfigs.PushFromRight; 30 | } } 31 | renderScene={(route, navigator) => { 32 | let Component = route.component; 33 | return ( 34 | 35 | ) 36 | } } 37 | /> 38 | 39 | ); 40 | } 41 | } 42 | 43 | 44 | const styles = StyleSheet.create({ 45 | container: { 46 | flex: 1, 47 | justifyContent: 'center', 48 | alignItems: 'center', 49 | backgroundColor: '#F5FCFF', 50 | }, 51 | welcome: { 52 | fontSize: 20, 53 | textAlign: 'center', 54 | margin: 10, 55 | }, 56 | instructions: { 57 | textAlign: 'center', 58 | color: '#333333', 59 | marginBottom: 5, 60 | }, 61 | }); 62 | 63 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Base/Root.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | Navigator 14 | } from 'react-native'; 15 | 16 | import TabBarView from './TabBarView'; 17 | 18 | export default class Root extends Component { 19 | render() { 20 | return ( 21 | 22 | { 26 | if (route.sceneConfig) { 27 | return route.sceneConfig; 28 | } 29 | return Navigator.SceneConfigs.PushFromRight; 30 | } } 31 | renderScene={(route, navigator) => { 32 | let Component = route.component; 33 | return ( 34 | 35 | ) 36 | } } 37 | /> 38 | 39 | ); 40 | } 41 | } 42 | 43 | 44 | const styles = StyleSheet.create({ 45 | container: { 46 | flex: 1, 47 | justifyContent: 'center', 48 | alignItems: 'center', 49 | backgroundColor: '#F5FCFF', 50 | }, 51 | welcome: { 52 | fontSize: 20, 53 | textAlign: 'center', 54 | margin: 10, 55 | }, 56 | instructions: { 57 | textAlign: 'center', 58 | color: '#333333', 59 | marginBottom: 5, 60 | }, 61 | }); 62 | 63 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/Main/styles.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jale on 16/6/3. 3 | */ 4 | 5 | import { 6 | StyleSheet 7 | } from 'react-native'; 8 | 9 | const constants = { 10 | actionColor: '#24CE84' 11 | }; 12 | 13 | var styles = StyleSheet.create({ 14 | container: { 15 | backgroundColor: '#f2f2f2', 16 | flex: 1 17 | }, 18 | listview: { 19 | flex: 1 20 | }, 21 | li: { 22 | backgroundColor: '#fff', 23 | borderBottomColor: '#eee', 24 | borderColor: 'transparent', 25 | borderWidth: 1, 26 | paddingLeft: 16, 27 | paddingTop: 14, 28 | paddingBottom: 16 29 | }, 30 | liContainer: { 31 | flex: 2 32 | }, 33 | liText: { 34 | color: '#333', 35 | fontSize: 16 36 | }, 37 | navbar: { 38 | alignItems: 'center', 39 | backgroundColor: '#fff', 40 | borderBottomColor: '#eee', 41 | borderColor: 'transparent', 42 | borderWidth: 1, 43 | justifyContent: 'center', 44 | height: 44, 45 | flexDirection: 'row' 46 | }, 47 | navbarTitle: { 48 | color: '#444', 49 | fontSize: 16, 50 | fontWeight: "500" 51 | }, 52 | statusbar: { 53 | backgroundColor: '#fff', 54 | height: 22 55 | }, 56 | center: { 57 | textAlign: 'center' 58 | }, 59 | actionText: { 60 | color: '#fff', 61 | fontSize: 16, 62 | textAlign: 'center' 63 | }, 64 | action: { 65 | backgroundColor: constants.actionColor, 66 | borderColor: 'transparent', 67 | borderWidth: 1, 68 | paddingLeft: 16, 69 | paddingTop: 14, 70 | paddingBottom: 16 71 | }, 72 | actionItem: { 73 | alignSelf: "stretch" 74 | } 75 | }); 76 | 77 | export {constants, styles}; 78 | -------------------------------------------------------------------------------- /Example/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*[.]android.js 5 | 6 | # Ignore templates with `@flow` in header 7 | .*/local-cli/generator.* 8 | 9 | # Ignore malformed json 10 | .*/node_modules/y18n/test/.*\.json 11 | 12 | # Ignore the website subdir 13 | /website/.* 14 | 15 | # Ignore BUCK generated dirs 16 | /\.buckd/ 17 | 18 | # Ignore unexpected extra @providesModule 19 | .*/node_modules/commoner/test/source/widget/share.js 20 | 21 | # Ignore duplicate module providers 22 | # For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root 23 | .*/Libraries/react-native/React.js 24 | .*/Libraries/react-native/ReactNative.js 25 | .*/node_modules/jest-runtime/build/__tests__/.* 26 | 27 | [include] 28 | 29 | [libs] 30 | node_modules/react-native/Libraries/react-native/react-native-interface.js 31 | node_modules/react-native/flow 32 | flow/ 33 | 34 | [options] 35 | module.system=haste 36 | 37 | esproposal.class_static_fields=enable 38 | esproposal.class_instance_fields=enable 39 | 40 | experimental.strict_type_args=true 41 | 42 | munge_underscores=true 43 | 44 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 45 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 46 | 47 | suppress_type=$FlowIssue 48 | suppress_type=$FlowFixMe 49 | suppress_type=$FixMe 50 | 51 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-2]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 52 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-2]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 53 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 54 | 55 | unsafe.enable_getters_and_setters=true 56 | 57 | [version] 58 | ^0.32.0 59 | -------------------------------------------------------------------------------- /Example/App/Page/TwoPage/RTTabBar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | TouchableOpacity, 13 | View 14 | } from 'react-native'; 15 | 16 | import Icon from 'react-native-vector-icons/Ionicons'; 17 | 18 | export default class RTTabBar extends Component { 19 | static propTypes = { 20 | 21 | 22 | goToPage: React.PropTypes.func, // 跳转到对应tab的方法 23 | activeTab: React.PropTypes.number, // 当前被选中的tab下标 24 | tabs: React.PropTypes.array, // 所有tabs集合 25 | 26 | tabNames: React.PropTypes.array, // 保存Tab名称 27 | tabIconNames: React.PropTypes.array, // 保存Tab图标 28 | 29 | }; // 注意这里有分号 30 | 31 | 32 | render() { 33 | return ( 34 | 35 | {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))} 36 | 37 | ); 38 | } 39 | 40 | componentDidMount() { 41 | // Animated.Value监听范围 [0, tab数量-1] 42 | this.props.scrollValue.addListener(this.setAnimationValue); 43 | } 44 | 45 | setAnimationValue({value}) { 46 | // console.log('动画值：'+value); 47 | } 48 | 49 | 50 | renderTabOption(tab, i) { 51 | let color = this.props.activeTab == i ? "#56abe4" : "red"; // 判断i是否是当前选中的tab，设置不同的颜色 52 | return ( 53 | this.props.goToPage(i)} style={styles.tab} key={tab}> 54 | 55 | 59 | 60 | {this.props.tabNames[i]} 61 | 62 | 63 | 64 | ); 65 | } 66 | 67 | 68 | } 69 | 70 | const styles = StyleSheet.create({ 71 | tabs: { 72 | flexDirection: 'row', 73 | height: 50, 74 | }, 75 | 76 | tab: { 77 | flex: 1, 78 | justifyContent: 'center', 79 | alignItems: 'center', 80 | }, 81 | 82 | tabItem: { 83 | flexDirection: 'column', 84 | alignItems: 'center', 85 | }, 86 | 87 | }); 88 | 89 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Assignment issuesJavaScript 12 | 13 | 14 | CSS 15 | 16 | 17 | CoffeeScript 18 | 19 | 20 | General 21 | 22 | 23 | GeneralCoffeeScript 24 | 25 | 26 | GeneralJavaScript 27 | 28 | 29 | JavaScript 30 | 31 | 32 | Potentially confusing code constructsJavaScript 33 | 34 | 35 | Probable bugsCSS 36 | 37 | 38 | 39 | 40 | AngularJS 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | $USER_HOME$/.subversion 64 | 65 | -------------------------------------------------------------------------------- /Example/ios/Example/Controller/PushController.m: -------------------------------------------------------------------------------- 1 | // 2 | // PushController.m 3 | // Example 4 | // 5 | // Created by 郭洪安 on 2016/11/12. 6 | // Copyright © 2016年 Facebook. All rights reserved. 7 | // 8 | 9 | #import "PushController.h" 10 | #import "AppDelegate.h" 11 | #import "RCTRootView.h" 12 | #import "RCTBundleURLProvider.h" 13 | 14 | @interface PushController () 15 | 16 | @end 17 | 18 | @implementation PushController 19 | 20 | - (void)viewDidLoad { 21 | [super viewDidLoad]; 22 | 23 | self.view.backgroundColor = [UIColor whiteColor]; 24 | 25 | self.navigationItem.title = @"我是ReactNative页面呦~"; 26 | 27 | NSURL *jsCodeLocation; 28 | 29 | // 另外一种可以获得RN的类方法 30 | // jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:[NSString stringWithFormat:@"./App/Page/ThreePage/Three"] fallbackResource:nil]; 31 | 32 | NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"; 33 | 34 | jsCodeLocation = [NSURL URLWithString:strUrl]; 35 | 36 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 37 | moduleName:@"Three" 38 | initialProperties:@{ 39 | 40 | @"launchOptions":@{ 41 | @"componentName":@"PageOne" 42 | } 43 | } 44 | launchOptions:nil]; 45 | self.view = rootView; 46 | 47 | } 48 | 49 | //- (void)viewWillAppear:(BOOL)animated{ 50 | // AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate]; 51 | // [app.nav setNavigationBarHidden:NO animated:animated]; 52 | // [super viewWillAppear:animated]; 53 | //} 54 | // 55 | //- (void)viewWillDisappear:(BOOL)animated{ 56 | // AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate]; 57 | // [app.nav setNavigationBarHidden:YES animated:animated]; 58 | // [super viewWillDisappear:animated]; 59 | //} 60 | 61 | @end 62 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/News/NewsDetail.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | InteractionManager, 14 | WebView 15 | } from 'react-native'; 16 | 17 | import NavBar from 'react-native-navbar'; 18 | 19 | import LeftNavBtn from '../../../../../Base/Component/leftNavBtn'; 20 | 21 | var WEBVIEW_REF = 'webview'; 22 | var DEFAULT_URL = 'https://m.facebook.com'; 23 | var TEXT_INPUT_REF = 'urlInput'; 24 | 25 | export default class NewsDetail extends Component { 26 | popToHome(){ 27 | InteractionManager.runAfterInteractions(()=>{ 28 | this.props.navigator.pop(); 29 | }); 30 | } 31 | render() { 32 | 33 | var titleConfig = { 34 | title: '新闻详情', 35 | style: {color: 'black', fontSize: 18, fontWeight: '500'} 36 | }; 37 | return ( 38 | 39 | this.popToHome()} 45 | /> 46 | } 47 | /> 48 | 57 | 58 | ); 59 | } 60 | } 61 | 62 | 63 | const styles = StyleSheet.create({ 64 | container: { 65 | flex: 1, 66 | backgroundColor: '#F5FCFF', 67 | }, 68 | welcome: { 69 | fontSize: 20, 70 | textAlign: 'center', 71 | margin: 10, 72 | }, 73 | instructions: { 74 | textAlign: 'center', 75 | color: '#333333', 76 | marginBottom: 5, 77 | }, 78 | }); 79 | 80 | -------------------------------------------------------------------------------- /Example/ios/ExampleTests/ExampleTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface ExampleTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation ExampleTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /Example/App/Page/SixPage/common/HeaderView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ljunb on 16/5/8. 3 | * 导航栏标题 4 | */ 5 | import React from 'react'; 6 | import { 7 | StyleSheet, 8 | View, 9 | Text, 10 | Image, 11 | TouchableOpacity, 12 | } from 'react-native'; 13 | 14 | import Icon from 'react-native-vector-icons/FontAwesome'; 15 | import Common from '../common/common'; 16 | 17 | export default class Header extends React.Component { 18 | 19 | render() { 20 | 21 | let NavigationBar = []; 22 | 23 | // 左边图片按钮 24 | if (this.props.leftIcon != undefined) { 25 | NavigationBar.push( 26 | 32 | 33 | 34 | ) 35 | } 36 | 37 | // 标题 38 | if (this.props.title != undefined) { 39 | NavigationBar.push( 40 | {this.props.title} 41 | ) 42 | } 43 | 44 | // 自定义标题View 45 | if (this.props.titleView != undefined) { 46 | let Component = this.props.titleView; 47 | 48 | NavigationBar.push( 49 | {this.props.titleView} 50 | ) 51 | } 52 | 53 | 54 | return ( 55 | 56 | {NavigationBar} 57 | 58 | ) 59 | } 60 | } 61 | 62 | const styles = StyleSheet.create({ 63 | 64 | navigationBarContainer: { 65 | marginTop: 20, 66 | flexDirection: 'row', 67 | height: 44, 68 | justifyContent: 'center', 69 | alignItems: 'center', 70 | borderBottomColor: '#ccc', 71 | borderBottomWidth: 0.5, 72 | backgroundColor: 'white' 73 | }, 74 | 75 | title: { 76 | fontSize: 15, 77 | marginLeft: 15, 78 | }, 79 | titleView: { 80 | fontSize: 15, 81 | }, 82 | leftIcon: { 83 | position:'absolute', 84 | left:10, 85 | top:5 86 | }, 87 | 88 | }) -------------------------------------------------------------------------------- /Example/ios/Example/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NSAppTransportSecurity 6 | 7 | NSAllowsArbitraryLoads 8 | 9 | 10 | UIAppFonts 11 | 12 | Zocial.ttf 13 | Octicons.ttf 14 | MaterialIcons.ttf 15 | Ionicons.ttf 16 | Foundation.ttf 17 | FontAwesome.ttf 18 | EvilIcons.ttf 19 | Entypo.ttf 20 | Entypo.ttf 21 | EvilIcons.ttf 22 | FontAwesome.ttf 23 | Foundation.ttf 24 | Ionicons.ttf 25 | MaterialIcons.ttf 26 | Octicons.ttf 27 | Zocial.ttf 28 | 29 | CFBundleDevelopmentRegion 30 | en 31 | CFBundleExecutable 32 | $(EXECUTABLE_NAME) 33 | CFBundleIdentifier 34 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 35 | CFBundleInfoDictionaryVersion 36 | 6.0 37 | CFBundleName 38 | $(PRODUCT_NAME) 39 | CFBundlePackageType 40 | APPL 41 | CFBundleShortVersionString 42 | 1.0 43 | CFBundleSignature 44 | ???? 45 | CFBundleVersion 46 | 1 47 | LSRequiresIPhoneOS 48 | 49 | UILaunchStoryboardName 50 | LaunchScreen 51 | UIRequiredDeviceCapabilities 52 | 53 | armv7 54 | 55 | UISupportedInterfaceOrientations 56 | 57 | UIInterfaceOrientationPortrait 58 | UIInterfaceOrientationLandscapeLeft 59 | UIInterfaceOrientationLandscapeRight 60 | 61 | UIViewControllerBasedStatusBarAppearance 62 | 63 | NSLocationWhenInUseUsageDescription 64 | 65 | 66 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 38 | 39 | 40 | 1476863602690 41 | 45 | 46 | 47 | 48 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Example/App/Page/ThreePage/Three.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 2016/11/7. 3 | */ 4 | import React, { Component } from 'react'; 5 | import { 6 | AppRegistry, 7 | StyleSheet, 8 | Text, 9 | View, 10 | TouchableOpacity, 11 | NativeModules 12 | } from 'react-native'; 13 | 14 | import PushButton from './PushButton'; 15 | 16 | class PageOne extends Component { 17 | 18 | render() { 19 | 20 | return( 21 | 22 | 这是页面一！ 23 | 24 | ); 25 | } 26 | } 27 | 28 | export default class Three extends Component { 29 | 30 | // 组件要不要更新 31 | shouldComponentUpdate() { 32 | return true; 33 | } 34 | // 组件将要更新 35 | componentWillUpdate(){ 36 | 37 | } 38 | 39 | // 组件已经更新 40 | componentDidUpdate() { 41 | 42 | } 43 | 44 | // 组件将要加载 45 | componentWillMount() { 46 | 47 | } 48 | 49 | // 在调用render之后,组件已经加载 50 | componentDidMount() { 51 | 52 | } 53 | 54 | // 组件加载 55 | render() { 56 | // var { launchOptions } = this.props; 57 | // if (launchOptions && launchOptions.componentName) { 58 | // switch (launchOptions.componentName) { 59 | // case 'PageOne': 60 | // return( 61 | // 62 | // ); 63 | // break; 64 | // default: 65 | // 66 | // } 67 | // } 68 | return ( 69 | 70 | 71 | 72 | { 76 | console.log('React事件' + event.nativeEvent.randomValue); 77 | alert('原生点击事件' + event.nativeEvent.randomValue) 78 | }} 79 | /> 80 | 81 | 82 | ); 83 | } 84 | } 85 | 86 | const styles = StyleSheet.create({ 87 | container: { 88 | flex: 1, 89 | }, 90 | buttonStyle:{ 91 | width:200, 92 | height:100, 93 | backgroundColor:'red', 94 | alignSelf:'center', 95 | justifyContent: 'center', 96 | marginTop:100 97 | } 98 | }); 99 | 100 | AppRegistry.registerComponent('Three', () => Three); -------------------------------------------------------------------------------- /Example/App/Page/SixPage/base/tabBarView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 16/9/10. 3 | */ 4 | import React, { Component } from 'react'; 5 | import { 6 | View, 7 | Text, 8 | Image, 9 | } from 'react-native'; 10 | 11 | import TabNavigator from 'react-native-tab-navigator'; 12 | import Home from '../containers/homeContainer'; 13 | import Main from '../containers/detail'; 14 | 15 | 16 | 17 | const tabBarItems = [ 18 | { title: '新闻', icon: () => , 19 | selectedIcon: () => 20 | ,component: Home }, 21 | { title: '我的', icon: () => , 22 | selectedIcon: () => , 23 | component: Main }, 24 | // { title: '关于', icon: () => , Component: HomeContainer }, 25 | ] 26 | 27 | export default class TabBarView extends Component { 28 | constructor(props) { 29 | super(props); 30 | this.state = { 31 | selectedTab: tabBarItems[0].title, 32 | }; 33 | } 34 | render(){ 35 | return( 36 | 37 | { 38 | tabBarItems.map((controller,i) => { 39 | let Component = controller.component; 40 | return( 41 | this.setState({selectedTab:controller.title})} 48 | titleStyle={{color:'#333',fontSize:12}} 49 | selectedTitleStyle={{color:'rgb(251,33,33)'}} 50 | allowFontScaling={true} 51 | > 52 | 53 | 54 | ) 55 | }) 56 | } 57 | 58 | ) 59 | } 60 | } 61 | 62 | 63 | -------------------------------------------------------------------------------- /Example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /Example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Base/TabBarView.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by SLPower on 16/9/10. 3 | */ 4 | import React, { Component } from 'react'; 5 | import { 6 | View, 7 | Text, 8 | Image, 9 | } from 'react-native'; 10 | 11 | import TabNavigator from 'react-native-tab-navigator'; 12 | 13 | import Icon from 'react-native-vector-icons/Ionicons'; 14 | 15 | import Home from '../Pages/News/News'; 16 | import Main from '../Pages/Main/Main'; 17 | import ConnectComponent from '../Common/ConnectComponent'; 18 | 19 | // const HomeUI=ConnectComponent(Home); 20 | 21 | import HomeContainer from '../Common/HomeContainer'; 22 | 23 | 24 | const tabBarItems = [ 25 | { title: '新闻', icon: () => , 26 | selectedIcon: () => 27 | ,component: HomeContainer }, 28 | { title: '我的', icon: () => , 29 | selectedIcon: () => , 30 | component: Main }, 31 | // { title: '关于', icon: () => , Component: HomeContainer }, 32 | ] 33 | 34 | export default class TabBarView extends Component { 35 | constructor(props) { 36 | super(props); 37 | this.state = { 38 | selectedTab: tabBarItems[0].title, 39 | }; 40 | } 41 | render(){ 42 | return( 43 | 44 | { 45 | tabBarItems.map((controller,i) => { 46 | let Component = controller.component; 47 | return( 48 | this.setState({selectedTab:controller.title})} 55 | titleStyle={{color:'#333',fontSize:12}} 56 | selectedTitleStyle={{color:'rgb(251,33,33)'}} 57 | allowFontScaling={true} 58 | > 59 | 60 | 61 | ) 62 | }) 63 | } 64 | 65 | ) 66 | } 67 | } 68 | 69 | 70 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/News/News.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | InteractionManager 14 | } from 'react-native'; 15 | 16 | import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view'; 17 | import NewsList from './NewsList'; 18 | import NavBar from 'react-native-navbar'; 19 | 20 | export default class News extends Component { 21 | 22 | static defaultProps = { 23 | 'showapi_appid' : '27786', 24 | 'showapi_sign' : '8435f098f5b74384ba294790c7e8b503' 25 | }; 26 | 27 | constructor(props){ 28 | super(props); 29 | this.state = { 30 | typeArr : [ 31 | { 32 | 'title':'全部', 33 | 'type':'', 34 | }, 35 | { 36 | 'title':'视频', 37 | 'type':'41', 38 | }, 39 | { 40 | 'title':'图片', 41 | 'type':'10', 42 | }, 43 | { 44 | 'title':'段子', 45 | 'type':'29', 46 | }, 47 | { 48 | 'title':'声音 ', 49 | 'type':'31', 50 | }, 51 | ], 52 | } 53 | } 54 | 55 | render() { 56 | var titleConfig = { 57 | title: '新闻', 58 | style: {color: 'black', fontSize: 18, fontWeight: '500'} 59 | }; 60 | 61 | return ( 62 | 63 | 67 | { 68 | this.state.typeArr.length > 0 ? 69 | }> 71 | { 72 | this.state.typeArr.map((item, i) => { 73 | return ( 74 | 76 | ) 77 | }) 78 | } 79 | : null 80 | } 81 | 82 | 83 | 84 | 85 | 86 | 87 | ); 88 | 89 | } 90 | } 91 | 92 | 93 | const styles = StyleSheet.create({ 94 | container: { 95 | flex: 1, 96 | 97 | backgroundColor: '#F5FCFF', 98 | }, 99 | welcome: { 100 | fontSize: 20, 101 | textAlign: 'center', 102 | margin: 10, 103 | }, 104 | instructions: { 105 | textAlign: 'center', 106 | color: '#333333', 107 | marginBottom: 5, 108 | }, 109 | }); 110 | -------------------------------------------------------------------------------- /Example/App/Page/FourPage/Four.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | import NavBar from 'react-native-navbar'; 15 | import LeftNavBtn from '../../Base/Component/leftNavBtn' 16 | 17 | 18 | export default class Four extends Component { 19 | // 组件加载完成 20 | render() { 21 | var titleConfig = { 22 | title: '生命周期', 23 | style: {color:'black',fontSize:18,fontWeight:'500'} 24 | }; 25 | return ( 26 | 27 | this.popToHome()} 33 | /> 34 | } 35 | /> 36 | 37 | 38 | ); 39 | } 40 | popToHome(){ 41 | this.props.navigator.popToTop(); 42 | } 43 | } 44 | 45 | class Detail extends Component { 46 | // 组件要不要更新 47 | shouldComponentUpdate() { 48 | console.log('shouldComponentUpdate','组件要不要更新'); 49 | return true; 50 | } 51 | // 组件将要更新 52 | componentWillUpdate(){ 53 | console.log('componentWillUpdate','组件将要更新'); 54 | } 55 | 56 | // 即将拿到组件的更新 57 | componentWillReceiveProps(props) { 58 | console.log('componentWillReceiveProps',props); 59 | } 60 | 61 | // 组件已经更新 62 | componentDidUpdate() { 63 | console.log('componentDidUpdate','组件更新完成'); 64 | } 65 | 66 | // 组件将要加载 67 | componentWillMount() { 68 | console.log('componentWillMount','组件将要加载'); 69 | } 70 | 71 | // 在调用render之后,组件已经加载 72 | componentDidMount() { 73 | console.log('componentDidMount','组件加载完成'); 74 | } 75 | // 组件初始之前的值 76 | static defaultProps = { 77 | number : 1 78 | }; 79 | // 组件初始的值 80 | constructor(props){ 81 | console.log(props,'组件初始之前的值'); 82 | super(props); 83 | this.state = { 84 | number : this.props.number 85 | }; 86 | console.log(this.state.number,'state初始的值'); 87 | } 88 | render() { 89 | console.log('render','组件加载'); 90 | return ( 91 | 92 | 点击我呀! 93 | {this.state.number} 94 | (主要看控制台打印哦~) 95 | 96 | ); 97 | } 98 | onTextClick(){ 99 | var number = this.state.number; 100 | number ++; 101 | this.setState({ 102 | number:number 103 | }) 104 | console.log(this.state.number,'state变更的值'); 105 | } 106 | } 107 | 108 | const styles = StyleSheet.create({ 109 | container: { 110 | flex: 1, 111 | backgroundColor:'white' 112 | }, 113 | TextStyle : { 114 | alignItems:'center', 115 | justifyContent: 'center', 116 | alignSelf:'center', 117 | height:50, 118 | marginTop:10, 119 | fontSize:20, 120 | } 121 | }); 122 | 123 | AppRegistry.registerComponent('Example', () => Four); -------------------------------------------------------------------------------- /Example/ios/Example/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/News/NewsItem.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | Image, 14 | Dimensions, 15 | TouchableOpacity 16 | } from 'react-native'; 17 | 18 | var {width, height} = Dimensions.get('window'); 19 | 20 | export default class NewsItem extends Component { 21 | static defaultProps = { 22 | contentObj: {}, 23 | }; 24 | 25 | constructor(props){ 26 | super(props); 27 | this.state = { 28 | newText:'', 29 | } 30 | } 31 | picturePress(){ 32 | return( 33 | 34 | 2222 35 | 36 | ) 37 | } 38 | 39 | componentDidMount(){ 40 | this.renderReplace(); 41 | } 42 | // 处理文字 43 | renderReplace(){ 44 | let text = this.props.contentObj.text; 45 | if (text.replace('\n')){ 46 | text = text.replace('\n',''); 47 | text = text.replace('\n',''); 48 | text = text.replace('\n',''); 49 | text = text.replace('\n',''); 50 | text = text.replace('\n',''); 51 | } 52 | this.setState({ 53 | newText:text 54 | }) 55 | } 56 | // 搞笑段子 57 | renderFunny(){ 58 | return( 59 | 60 | 61 | {this.state.newText} 62 | 63 | 64 | ) 65 | } 66 | // 搞笑视频 67 | renderVideo(){ 68 | return( 69 | 70 | {this.state.newText} 71 | 72 | 73 | ) 74 | } 75 | // 搞笑图片 76 | renderPicture(){ 77 | return( 78 | this.picturePress()}> 79 | 80 | 81 | {this.state.newText} 82 | 83 | 84 | 85 | 86 | ) 87 | } 88 | // 搞笑声音 89 | renderMusic(){ 90 | return( 91 | 92 | 93 | {this.state.newText} 94 | 95 | 96 | ) 97 | } 98 | 99 | // 全部cell 100 | renderCell(){ 101 | //视频 102 | if (this.props.contentObj.type == '41'){ 103 | return( 104 | 105 | {this.renderVideo()} 106 | 107 | ) 108 | } 109 | // 图片 110 | if (this.props.contentObj.type == '10'){ 111 | return( 112 | 113 | {this.renderPicture()} 114 | 115 | ) 116 | } 117 | // 搞笑段子 118 | if (this.props.contentObj.type == '29'){ 119 | return ( 120 | {this.renderFunny()} 121 | ) 122 | } 123 | // 声音 124 | if (this.props.contentObj.type == '31'){ 125 | return( 126 | 127 | {this.renderMusic()} 128 | 129 | ) 130 | } 131 | 132 | } 133 | 134 | render() { 135 | return ( 136 | 137 | {this.renderCell()} 138 | 139 | 140 | ); 141 | } 142 | } 143 | 144 | 145 | const styles = StyleSheet.create({ 146 | container: { 147 | width:width, 148 | backgroundColor: 'white', 149 | 150 | }, 151 | lineStyle: { 152 | backgroundColor:'#ddd', 153 | height:1, 154 | marginLeft:10, 155 | marginRight:10 156 | }, 157 | textStyle: { 158 | fontSize:18, 159 | margin:10, 160 | } 161 | 162 | }); 163 | 164 | -------------------------------------------------------------------------------- /Example/App/Page/FivePage/Component/Pages/Main/Main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View, 13 | InteractionManager, 14 | ListView, 15 | AlertIOS 16 | } from 'react-native'; 17 | 18 | import NavBar from 'react-native-navbar'; 19 | import LeftNavBtn from '../../../../../Base/Component/leftNavBtn'; 20 | 21 | // import Wilddog from 'wilddog'; 22 | 23 | import {styles} from './styles'; 24 | import {ActionButton} from './components/ActionButton' 25 | import {ListItem} from './components/ListItem' 26 | import {StatusBar} from './components/StatusBar' 27 | 28 | const Wilddog = require('wilddog'); 29 | const WilddogUrl = 'https://scm.wilddogio.com/'; 30 | 31 | export default class Main extends Component { 32 | 33 | constructor(props) { 34 | super(props); 35 | this.state = { 36 | dataSource: new ListView.DataSource({ 37 | rowHasChanged: (row1, row2) => row1 !== row2 38 | }) 39 | }; 40 | this.itemsRef = Main.getRef().child('items'); 41 | } 42 | 43 | static getRef() { 44 | return new Wilddog(WilddogUrl); 45 | } 46 | 47 | render() { 48 | return ( 49 | 50 | 51 | 55 | 56 | 57 | ); 58 | } 59 | 60 | componentDidMount() { 61 | this.listenForItems(this.itemsRef); 62 | } 63 | 64 | // 这里就是让这个 ListItem 活起来的关键所有在了 65 | listenForItems(itemsRef) { 66 | itemsRef.on('value', (snap) => { 67 | 68 | // get children as an array 69 | var items = []; 70 | snap.forEach((child) => { 71 | items.push({ 72 | title: child.val().title, 73 | _key: child.key() 74 | }); 75 | }); 76 | 77 | this.setState({ 78 | dataSource: this.state.dataSource.cloneWithRows(items) 79 | }); 80 | 81 | }); 82 | } 83 | 84 | // 新建条目的时候只需要向 wilddog 写入数据即可, 因为我们在前面调用了 itemsRef.on('value'), wilddog 数据库中的改动会被自动 85 | // 同步到本地进行处理 86 | _addItem() { 87 | AlertIOS.prompt( 88 | '新增条目', 89 | '请输入要添加的条目名称', 90 | [ 91 | { 92 | text: '确认', 93 | onPress: (text) => { 94 | this.itemsRef.push({title: text}) 95 | } 96 | } 97 | ], 98 | 'plain-text' 99 | ); 100 | } 101 | 102 | _renderItem(item) { 103 | const onPress = () => { 104 | AlertIOS.prompt( 105 | '删除条目', 106 | '确认删除 ' + item.title + ' 吗?', 107 | [ 108 | {text: '删除', onPress: (text) => this.itemsRef.child(item._key).remove()}, 109 | {text: '取消', onPress: (text) => console.log('已取消')} 110 | ], 111 | 'default' 112 | ); 113 | }; 114 | return ( 115 | 116 | ); 117 | } 118 | 119 | 120 | 121 | // render() { 122 | // var titleConfig = { 123 | // title: '我的', 124 | // style: {color:'black',fontSize:18 ,fontWeight:'500'} 125 | // }; 126 | // return ( 127 | // 128 | // 132 | // 133 | // ); 134 | // } 135 | } 136 | 137 | 138 | const styles1 = StyleSheet.create({ 139 | container: { 140 | flex: 1, 141 | backgroundColor: '#F5FCFF', 142 | }, 143 | welcome: { 144 | fontSize: 20, 145 | textAlign: 'center', 146 | margin: 10, 147 | }, 148 | instructions: { 149 | textAlign: 'center', 150 | color: '#333333', 151 | marginBottom: 5, 152 | }, 153 | }); 154 | 155 | -------------------------------------------------------------------------------- /Example/ios/Example.xcodeproj/xcshareddata/xcschemes/Example.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 67 | 68 | 78 | 80 | 86 | 87 | 88 | 89 | 93 | 94 | 95 | 96 | 97 | 98 | 104 | 106 | 112 | 113 | 114 | 115 | 117 | 118 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Learn React-Native 2 | ## Example 3 | 这个工程是我学习react-native的总结，我会把学到的东西，遇到的问题，总结的经验放在里面，希望以后再遇到问题的时候可以找到解决的办法，也希望可能帮到其他人。 4 | ## OnePage: 5 | 这是一个关于计时器使用的例子,是我通过学习[30-days-of-react-native](https://github.com/fangwei716/30-days-of-react-native)第一天的内容得到的。 6 | ## TwoPage: 7 | 这是一个宝宝秀项目，是照着网上的一个付费视频写的，已经完成了第一个模块的功能开发，有视频播放与暂停，评论功能，接口的调用。这个会一直更新的这个项目结束。 8 | ## ThreePage: 9 | 这是react-native页面跳转到原生页面的案例，过两天会把整个流程完善。 10 | 这个是我之前写的一篇关于[在iOS中创建React-Native页面，并跳转到原生页面](http://www.jianshu.com/p/ffe9e8b8dbe6)的文章, 11 | 今天在简书上更新了一篇文章[在react-native的项目中跳转到原生iOS页面](http://www.jianshu.com/p/2baeac04275e) 12 | ### 经验： 13 | * 计时器的一些使用方式 14 | 15 | `setInterval()` 会不停地调用函数。 16 | 17 | ``` 18 | // 最后的参数指每隔1s调用一次函数 19 | this.setIntervar = setInterval(()=>{},1000) 20 | ``` 21 | 22 | `setTimeout()` 只调用函数一次。 23 | 24 | ``` 25 | this.setTimeout = setTimeout(()=>{},1000) 26 | ``` 27 | 28 | `clearInterval()` 可以关闭setInterval()。 29 | 30 | ``` 31 | this.setIntervar && clearInterval(this.setIntervar); 32 | ``` 33 | 34 | * `InteractionManager`可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行 35 | 36 | ``` 37 | InteractionManager.runAfterInteractions(() => { 38 | // ...耗时较长的同步的任务... 39 | // 比如页面跳转 40 | }); 41 | ``` 42 | 43 | * 这个方法可以得到Navigator的层级关系； 44 | 45 | ``` 46 | var currentRoute = this.props.navigator.getCurrentRoutes(); 47 | ``` 48 | ``` 49 | for(var i = 0 ; i r1 !== r2}); 66 | this.state = { 67 | //默认的参数，可以通过this.setState({})修改里面的参数 68 | dataSource : dataSource, 69 | }; 70 | 71 | // 这里面可以用来绑定this.XXX()方法，也可以用来初始化ListViewDataSource方法 72 | this.XXX = this.XXX.bind(this); 73 | } 74 | ``` 75 | * 不可变的属性，也可以当做跨页面参数来使用，可以通过this.props.XXX获取里面的参数； 76 | 77 | ``` 78 | static defaultProps = { 79 | // 里面写不可变的属性 80 | }; 81 | ``` 82 | 这个方法是用来确定this.props.XXX类型的，如果XXX这个参数不写，就会报错 83 | 84 | ``` 85 | static propTypes = { 86 | // 必须要写的数组 87 | XXX: React.PropTypes.array.isXXX, 88 | }; 89 | ``` 90 | * 生命周期(以后完善) 91 | 92 | ``` 93 | // 程序加载完成的时候调用 94 | componentDidMount(){ 95 | // 一些复杂的操作 96 | // 每隔多少时间 97 | duration:1000 98 | } 99 | ``` 100 | * 三位运算符`{ ? : }` 101 | 在react-native里面用到最多的东西应该就是三位运算符了，它免去了麻烦的判断，只需要根据组件的状态来判断显示什么样页面与数据 102 | * 网络请求 103 | 在react-native中使用最多的就是`fetch`请求了，在`fetch`请求中可以传`url`,`body`参数，也可以请求`GET`,`POST`,`PUT`等方式 104 | 105 | ``` 106 | fetch(url ,{ 107 | method: 'GET', // 这里可以改成POST 108 | // 如果是POST请求，可以将需要请求的参数写在里面 109 | headers: { 110 | 'Accept-Encoding': '', 111 | 'Content-Type': '', 112 | 'User-Agent': '', 113 | } 114 | }) 115 | // 这是一个解析JSON的方法，也可以将response.json()改成response.text()这个需要和后台商量好 116 | .then((response) => response.json()) 117 | .then((responseData)=> { 118 | // responseData就是解析过来的JSON对象 119 | console.log(responseData); 120 | }) 121 | .catch((error)=> { 122 | if (error) { 123 | //特殊处理 124 | console.log(error); 125 | } 126 | }); 127 | ``` 128 | * 在RN里面同一个页面是可以写两个类的，但只能导出一个`export`，一般情况下第二个类都是对第一个的补充，所以最好在第二个类中公开一些方法 129 | 130 | ``` 131 | class ImageItem extends Component { 132 | static defaultProps = { 133 | // 比如说第一个类需要封装一个图片组件，那个给下面的类传一个imageName就可以了 134 | imageName: '', 135 | }; 136 | render(){ 137 | return( 138 | 139 | ) 140 | } 141 | } 142 | ``` 143 | 在第一个组件中通过调用ImageItem就可以了，将需要的参数传过去。 144 | 145 | ``` 146 | 149 | ``` 150 | 151 | 152 | 153 | ### 推荐的第三方开源组件（我只写我用到过的，感觉很不错的库，在后面我会为这些库写一些文章把我遇到的问题写出来） 154 | 1. 导航条组件：[react-native-navbar](https://github.com/react-native-community/react-native-navbar) 155 | 推荐原因：用过系统Navigator组件后，一般都需要自己自定制导航条的按钮和标题，用了这个组件会剩下很多的步骤。这个组件在我的项目中一直用到； 156 | 2. 底部TabBar组件：[react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) 157 | 推荐原因：多数的APP都会存在底部的选项卡，这个组件就是用来实现这个的。这个组件在我的项目中TwoPage中有用到； 158 | 3. 底部TabBar组件：[react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view) 159 | 推荐原因：用过安卓版微信的用户知道，底部的TabBar是可以左右滚动的，这个组件就可以实现这个功能。这个组件会在之后用到； 160 | 4. 图标：[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) 161 | 推荐原因：这个组件可以为你省去找UI要图片的步骤，而且这个组件可以用在很多地方，据说使用这个组件会让图标的加载更流畅。这个组件在项目中很多地方有用到； 162 | 5. 轮播图：[react-native-swiper](react-native-swiper) 163 | 推荐原因：这个组件可以用来做为广告轮播图，页面切换等等，反正是很抢到的一个库。这个组件在项目中很多地方有用到； 164 | 6. 视频播放：[react-native-video](http://serve.3ezy.com/github.com/brentvatne/react-native-video/) 165 | 推荐原因：一个类似于HTML5中`