Screen share

.eslintrc

@@ -0,0 +1,73 @@
+{
+    "parser": "babel-eslint",
+    "extends": "airbnb",
+    "plugins": [
+      "promise",
+      "react",
+      "json",
+      "react-native"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true,
+        "es6": true,
+        "experimentalObjectRestSpread": true
+      }
+    },
+    "env": {
+      "browser": true,
+      "node": true,
+      "commonjs": true,
+      "meteor": true,
+      "mongo": true,
+      "jquery": true,
+      "amd": true
+    },
+    "settings": {
+      "react": {
+        "pragma": "React"
+      }
+    },
+    "rules": {
+      "no-unused-vars": ["error", {"varsIgnorePattern": "React"}],
+      "no-constant-condition": 0,
+      "object-curly-spacing": 0,
+      "comma-dangle": 0,
+      "new-cap": 0,
+      "max-len": 0,
+      "no-underscore-dangle": 0,
+      "react/jsx-space-before-closing": 0,
+      "react/jsx-first-prop-new-line": 0,
+      "react/jsx-closing-bracket-location": 0,
+      "react/prefer-stateless-function": 0,
+      "semi": 0,
+      "import/no-unresolved": 0,
+      "no-use-before-define": 0,
+      "space-before-function-paren": 0,
+      "react/prop-types": 0,
+      "react/jsx-tag-spacing": 0,
+      "react/jsx-filename-extension": 0,
+      "prefer-template": 0,
+      "import/extensions": 0,
+      "react/jsx-no-bind": 0,
+      "react/no-unused-state": 0,
+      "no-nested-ternary": 0,
+      "jsx-quotes": 0,
+      "indent": 0,
+      "react/jsx-indent": 0,
+      "linebreak-style": 0,
+      "padded-blocks": 0,
+      "class-methods-use-this": 0,
+      "react/no-array-index-key": 0,
+      "react/jsx-closing-tag-location": 0,
+      "object-curly-newline": 0,
+      "spaced-comment": 0,
+      "quotes": 0,
+      "react/jsx-indent-props": 0,
+      "react/no-multi-comp": 0,
+      "import/prefer-default-export": 0
+    }
+  }
+

.gitignore

@@ -8,4 +8,7 @@
 /android/build
 Ios/build
 /android/app/build
-.idea/
+.idea/
+*.xcuserstate
+*.xcuserstate
+ios/RNAgoraExample.xcodeproj/project.xcworkspace/xcuserdata/apple.xcuserdatad/UserInterfaceState.xcuserstate

App.js

@@ -1,258 +1,60 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
-import React, {Component} from 'react';
-import {
-    StyleSheet,
-    Text,
-    View,
-    TextInput,
-    TouchableOpacity,
-} from 'react-native';
-
-import LiveView from './src'
-
-import {Alert} from 'react-native';
-import RNRestart from 'react-native-restart';
-import {setJSExceptionHandler} from 'react-native-exception-handler';
-
-const errorHandler = (e, isFatal) => {
-    if (isFatal) {
-        Alert.alert(
-            'Unexpected error occurred',
-            `
-        Error: ${(isFatal) ? 'Fatal:' : ''} ${e.name} ${e.message}
-
-        We will need to restart the app.
-        `,
-            [{
-                text: 'Restart',
-                onPress: () => {
-                    RNRestart.Restart();
-                }
-            }]
-        );
-    } else {
-        console.log(e); // So that we can see it in the ADB logs in case of Android if needed
+import React, {Component} from 'react'
+import {Platform, BackHandler, ToastAndroid} from 'react-native'
+import {Actions} from 'react-native-router-flux'
+import {Provider} from 'mobx-react'
+
+import Router, {RKey} from './src/routes'
+import stores from './src/stores/index'
+
+import './src/libs/globe'
+import './src/libs/utils'
+
+global.__IOS__ = Platform.OS === 'ios'
+global.__ANDROID__ = Platform.OS === 'android'
+
+if (!__DEV__) {
+    global.console = {
+        log: () => {
+        },
+        error: () => {
+        },
+        warn: () => {
+        },
     }
-};
-
-setJSExceptionHandler(errorHandler);
+}
 
 export default class App extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            channel: '00001', //default '00001'
-            uid: '0',         //default 0
-            role: 1,          //1:Broadcaster 2:Audience
-            showLive: false,
-            err: undefined
-        };
+    componentWillMount() {
+        if (__ANDROID__) BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid)
     }
 
-    handleJoin = () => {
-        if (this.state.channel === '') {
-            this.setState({
-                err: 'channel is empty'
-            })
-        } else if (this.state.uid === '') {
-            this.setState({
-                err: 'uid is empty'
-            })
-        } else {
-            this.setState({
-                showLive: true
-            })
-        }
-    };
-
-    handleCancel = (err) => {
-        this.setState({
-            showLive: false,
-            err
-        })
-    };
-
-    handleSegmentChange = (role) => {
-        this.setState({
-            role: role
-        })
+    componentWillUnmount() {
+        if (__ANDROID__) BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid)
     }
 
-    get isBroadcaster() {
-        return this.state.role === 1
+    onBackAndroid = () => {
+        const currentRoutes = Actions.state.routes
+        const currentRoute = currentRoutes[0].routeName
+        const bTopPage = currentRoutes.length <= 1
+        const sTargetPage = (currentRoute === RKey.HOME)
+        if (bTopPage && sTargetPage) {
+            if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
+                //最近2秒内按过back键，可以退出应用。
+                BackHandler.exitApp()
+                return false
+            }
+            this.lastBackPressed = Date.now();
+            ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT)
+            return true;
+        }
+        Actions.pop()
+        return true;
     }
 
     render() {
-        const {channel, uid, role, showLive, err} = this.state;
-
-        let leftStyle = this.isBroadcaster ? styles.roleLeftSelected : styles.roleLeftUnSelected
-        let leftTextStyle = this.isBroadcaster ? styles.textRoleSelected : styles.textRoleUnSelected
-
-        let rightStyle = this.isBroadcaster ? styles.roleRightUnSelected : styles.roleRightSelected
-        let rightTextStyle = this.isBroadcaster ? styles.textRoleUnSelected : styles.textRoleSelected
-
-        if (showLive) {
-            return (
-                <LiveView onCancel={this.handleCancel} channel={channel} uid={uid} role={role}/>
-            )
-        } else {
-            return (
-                <View style={styles.container}>
-
-                    <Text style={styles.welcome}>声网 agora.io</Text>
-
-                    <Text style={styles.textChannelNo}>channel</Text>
-                    <TextInput style={styles.textInput} placeholder={'Joining in the same channel'}
-                               keyboardType="numeric"
-                               onChangeText={(value) => this.setState({channel: value})} value={channel}/>
-
-                    <Text style={styles.textUserId}>uid</Text>
-                    <TextInput style={styles.textInput} placeholder={'Unique id for each member in one channel'}
-                               keyboardType="numeric"
-                               multiline={false}
-                               maxLength={6}
-                               onChangeText={(value) => this.setState({uid: value})} value={uid}/>
-
-                    <Text style={styles.textRole}>role</Text>
-                    <View style={styles.roleWrap}>
-                        <TouchableOpacity
-                            style={leftStyle}
-                            onPress={this.handleSegmentChange.bind(this, 1)}>
-                            <Text style={leftTextStyle}>Broadcaster</Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            style={rightStyle}
-                            onPress={this.handleSegmentChange.bind(this, 2)}>
-                            <Text style={rightTextStyle}>Audience</Text>
-                        </TouchableOpacity>
-                    </View>
-
-                    <TouchableOpacity
-                        style={styles.button}
-                        onPress={this.handleJoin}>
-                        <Text style={styles.buttonText}>Enter</Text>
-                    </TouchableOpacity>
-
-                    {!!err && <Text style={styles.errorText}>Error： {err}</Text>}
-
-                    <Text style={styles.companyText}>Powered by agora.io inc.</Text>
-                </View>
-            );
-        }
+        return (<Provider {...stores}>
+            <Router/>
+        </Provider>)
     }
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        paddingHorizontal: 30,
-        paddingVertical: 30,
-        backgroundColor: '#F5FCFF',
-    },
-    welcome: {
-        fontSize: 25,
-        textAlign: 'center',
-        marginTop: 100,
-        marginBottom: 60,
-        color: 'black'
-    },
-    textChannelNo: {
-        fontSize: 18,
-        color: '#333333',
-    },
-    textUserId: {
-        fontSize: 18,
-        color: '#333333',
-        marginTop: 15,
-    },
-    textRole: {
-        fontSize: 18,
-        color: '#333333',
-        marginTop: 15,
-    },
-    roleWrap: {
-        height: 34,
-        flexDirection: 'row',
-        marginTop: 15,
-        borderColor: '#5caaf6',
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    roleLeftSelected: {
-        flex: 1,
-        backgroundColor: '#5caaf6',
-        borderBottomLeftRadius: 5,
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    roleLeftUnSelected: {
-        flex: 1,
-        backgroundColor: '#00000000',
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    roleRightSelected: {
-        flex: 1,
-        backgroundColor: '#5caaf6',
-        borderBottomRightRadius: 5,
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    roleRightUnSelected: {
-        flex: 1,
-        backgroundColor: '#00000000',
-        justifyContent: 'center',
-        alignItems: 'center'
-    },
-    textRoleSelected: {
-        fontSize: 16,
-        color: '#ffffff',
-    },
-    textRoleUnSelected: {
-        fontSize: 16,
-        color: '#333333'
-    },
-    textInput: {
-        height: 44,
-        backgroundColor: '#F5FCFF',
-        borderRadius: 20,
-        borderColor: '#cccccc',
-        borderWidth: 0.5,
-        marginTop: 15,
-        paddingHorizontal: 20,
-    },
-    button: {
-        paddingHorizontal: 20,
-        height: 44,
-        backgroundColor: '#5caaf6',
-        borderRadius: 20,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginTop: 36,
-    },
-    buttonText: {
-        backgroundColor: '#5caaf6',
-        textAlign: 'center',
-        color: '#fff'
-    },
-    errorText: {
-        textAlign: 'center',
-        fontSize: 16,
-        color: 'red',
-        marginTop: 15,
-    },
-    companyText: {
-        position: 'absolute',
-        zIndex: 99,
-        fontSize: 14,
-        color: 'black',
-        alignSelf: 'center',
-        bottom: 54
-    }
-});

android/app/build.gradle

@@ -139,6 +139,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-splash-screen')
     implementation fileTree(include: ['*.jar'], dir: 'libs')
     //    compile "com.android.support:appcompat-v7:23.0.1"
     implementation 'com.facebook.react:react-native:+'