diff --git a/android/app/build.gradle b/android/app/build.gradle
index 2bf24c7..ab812a4 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -75,4 +75,6 @@ dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:0.17.+"
+ compile project(':react-native-android-statusbar')
+ compile project(':react-native-splashscreen')
}
diff --git a/android/app/src/main/java/com/demoapp/MainActivity.java b/android/app/src/main/java/com/demoapp/MainActivity.java
index addd33c..2697e8e 100644
--- a/android/app/src/main/java/com/demoapp/MainActivity.java
+++ b/android/app/src/main/java/com/demoapp/MainActivity.java
@@ -11,6 +11,9 @@
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
+import me.neo.react.StatusBarPackage;
+import com.remobile.splashscreen.*;
+
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
@@ -26,6 +29,8 @@ protected void onCreate(Bundle savedInstanceState) {
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
+ .addPackage(new StatusBarPackage(this))
+ .addPackage(new RCTSplashScreenPackage(this))
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
diff --git a/android/app/src/main/res/drawable/splash.png b/android/app/src/main/res/drawable/splash.png
new file mode 100644
index 0000000..65ef88e
Binary files /dev/null and b/android/app/src/main/res/drawable/splash.png differ
diff --git a/android/settings.gradle b/android/settings.gradle
index 4f17d84..6a47b70 100644
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -1,3 +1,8 @@
rootProject.name = 'DemoApp'
include ':app'
+include ':react-native-android-statusbar'
+include ':react-native-splashscreen'
+
+project(':react-native-android-statusbar').projectDir = new File(settingsDir, '../node_modules/react-native-android-statusbar')
+project(':react-native-splashscreen').projectDir = new File(rootProject.projectDir, '../node_modules/@remobile/react-native-splashscreen/android')
\ No newline at end of file
diff --git a/index.android.js b/index.android.js
index 277c6d5..5da607c 100644
--- a/index.android.js
+++ b/index.android.js
@@ -1,5 +1,4 @@
import React, { AppRegistry, Component, Navigator, DrawerLayoutAndroid, ScrollView, View, Text } from 'react-native';
-
import { Toolbar } from './src/components';
import Navigation from './src/scenes/Navigation';
diff --git a/package.json b/package.json
index 48fe131..b467826 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
"start": "react-native start"
},
"dependencies": {
+ "@remobile/react-native-splashscreen": "^1.0.3",
"alt": "^0.18.1",
"react-native": "^0.17.0",
- "react-native-material-design": "^0.2.1"
+ "react-native-android-statusbar": "^0.1.2",
+ "react-native-material-design": "^0.3.0"
}
}
diff --git a/src/actions/AppActions.js b/src/actions/AppActions.js
index fcfbf62..b44d9ac 100644
--- a/src/actions/AppActions.js
+++ b/src/actions/AppActions.js
@@ -1,4 +1,6 @@
import alt from '../alt';
+import StatusBarAndroid from 'react-native-android-statusbar';
+import { COLOR } from 'react-native-material-design';
class AppActions {
@@ -7,6 +9,7 @@ class AppActions {
}
updateTheme(name) {
+ StatusBarAndroid.setHexColor(COLOR[`${name}700`].color);
return name;
}
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index 510e3cf..ced1745 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -50,7 +50,7 @@ export default class Toolbar extends Component {
onIconPress={onIconPress}
actions={[{
icon: 'warning',
- counter: counter,
+ badge: { value: counter },
onPress: this.increment
}]}
style={{
diff --git a/src/scenes/Avatars.js b/src/scenes/Avatars.js
index ed18035..5e0c1a4 100644
--- a/src/scenes/Avatars.js
+++ b/src/scenes/Avatars.js
@@ -1,4 +1,4 @@
-import React, { Component, View } from 'react-native';
+import React, { Component, View, Image } from 'react-native';
import { Avatar, Subheader, COLOR } from 'react-native-material-design';
export default class Avatars extends Component {
@@ -8,10 +8,10 @@ export default class Avatars extends Component {
-
-
-
-
+ } />
+ } />
+ } />
+ } />
@@ -23,10 +23,10 @@ export default class Avatars extends Component {
-
-
-
-
+ } />
+ } />
+ } />
+ } />
);
diff --git a/src/scenes/Buttons.js b/src/scenes/Buttons.js
index f684234..e7218c4 100644
--- a/src/scenes/Buttons.js
+++ b/src/scenes/Buttons.js
@@ -1,4 +1,4 @@
-import React, { Component, PropTypes, View, Text, IntentAndroid, InteractionManager } from 'react-native';
+import React, { Component, PropTypes, View, Text, IntentAndroid, InteractionManager, Alert, TouchableNativeFeedback } from 'react-native';
import { Button, Subheader, COLOR } from 'react-native-material-design';
import AppStore from '../stores/AppStore';
@@ -12,9 +12,9 @@ export default class Buttons extends Component {
-
diff --git a/src/scenes/IconToggles.js b/src/scenes/IconToggles.js
new file mode 100644
index 0000000..6e92887
--- /dev/null
+++ b/src/scenes/IconToggles.js
@@ -0,0 +1,135 @@
+import React, { Component, View, Image } from 'react-native';
+import { Avatar, Subheader, COLOR, IconToggle, Icon } from 'react-native-material-design';
+
+export default class IconToggles extends Component {
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const styles = {
+ avatarContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingHorizontal: 16
+ },
+ icon: {
+ margin: 16
+ }
+};
\ No newline at end of file
diff --git a/src/scenes/List.js b/src/scenes/List.js
index 0c6dc12..9efcf81 100644
--- a/src/scenes/List.js
+++ b/src/scenes/List.js
@@ -1,48 +1,187 @@
-import React, { Component, View, ProgressBarAndroid } from 'react-native';
-import { Subheader, Divider, List, COLOR } from 'react-native-material-design';
+import React, { Component, View, ProgressBarAndroid, Image } from 'react-native';
+import { Subheader, Divider, List, Icon, Avatar, COLOR } from 'react-native-material-design';
import AppStore from '../stores/AppStore';
export default class ListExample extends Component {
- constructor(props) {
- super(props);
- this.state = {
- loading: false
- };
- }
-
render() {
- const { loading } = this.state;
- const theme = AppStore.getState().theme;
-
- if (loading) {
- return (
-
-
-
- );
- }
-
return (
-
-
- {data['text-only-single-line'].map((item) => {
- return
;
- })}
+
+ {data.single.text.map(list => (
+
+ ))}
+
);
-
- }
+ };
}
const styles = {
- progress: {
- position: 'relative',
- top: -6
+ content: {
+ padding: 16,
}
};
const data = {
- 'text-only-single-line': ['Inbox', 'Starred', 'Sent Mail', 'Drafts']
+ single: {
+ text: [
+ {
+ primaryText: 'Inbox'
+ },
+ {
+ primaryText: 'Starred'
+ },
+ {
+ primaryText: 'Sent mail'
+ },
+ {
+ primaryText: 'Drafts'
+ }
+ ],
+ iconText: [
+ {
+ primaryText: 'Inbox',
+ leftIcon: 'inbox'
+ },
+ {
+ primaryText: 'Outbox',
+ leftIcon: 'outbox'
+ },
+ {
+ primaryText: 'Trash',
+ leftIcon: 'delete'
+ },
+ {
+ primaryText: 'Spam',
+ leftIcon: 'block-helper'
+ }
+ ],
+ avatarText: [
+ {name: 'Jsa', avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg'},
+ {name: 'Pixeliris', avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg'},
+ {name: 'Ok', avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/ok/128.jpg'},
+ {name: 'Marcosmoralez', avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/marcosmoralez/128.jpg'},
+ {name: 'Sindresorhus', avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/128.jpg'}
+ ]
+ },
+ two: {
+ text: [
+ {
+ primaryText: 'Profile photo',
+ secondaryText: 'Change your Google+ profile photo'
+ },
+ {
+ primaryText: 'Show your status',
+ secondaryText: 'Your status is visible to everyone you use with'
+ }
+ ],
+ iconText: [
+ {
+ leftIcon: 'phone',
+ primaryText: '(650) 555-1234',
+ secondaryText: 'Mobile',
+ rightIcon: 'message-text'
+ },
+ {
+ primaryText: '(323) 555-6789',
+ secondaryText: 'Work',
+ rightIcon: 'message-text'
+ },
+ {
+ leftIcon: 'email',
+ primaryText: 'being99@qq.com',
+ secondaryText: 'Personal',
+ },
+ {
+ primaryText: 'benzhao1988@gmail.com',
+ secondaryText: 'Work',
+ }
+ ],
+ avatarText: [
+ {
+ name: 'Pixeliris',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg',
+ subject: 'Brunch this Weekend?',
+ body: 'Hello！ I’ll be your neighbourhood. How about we have branch together in my home this weekend.'
+ },
+ {
+ name: 'Jsa',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg',
+ subject: 'Verify Email',
+ body: 'Hey Ben Zhao,Please click the link below to verify your account: '
+ },
+ {
+ name: 'Ok',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/ok/128.jpg',
+ subject: 'Please confirm your email',
+ body: 'Hi Ben,Thanks so much for joining Pinterest! To finish signing up, you just need to confirm that we got your email right.'
+ },
+ {
+ name: 'Marcosmoralez',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/marcosmoralez/128.jpg',
+ subject: '开始使用Airbnb',
+ body: 'Airbnb欢迎您,在Airbnb，您可以向世界上任何一个地方的当地人预订房间、民宅、甚至城堡。'
+ },
+ {
+ name: 'Sindresorhus',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/128.jpg',
+ subject: 'Welcome to Genymotion - User account activation',
+ body: 'Hi benzhao,Your user account with the e-mail address benzhao1988@gmail.com has been created. '
+ }
+ ],
+ avatarIconText: [
+ {
+ name: 'Folders',
+ files: [
+ {
+ name: 'Photos',
+ time: 'Jan 9, 2014',
+ icon: 'folder'
+ },
+ {
+ name: 'Recipes',
+ time: 'Jan 17, 2014',
+ icon: 'folder'
+ },
+ {
+ name: 'Work',
+ time: 'Jan 28, 2014',
+ icon: 'folder'
+ }
+ ]
+ },
+ {
+ name: 'Files',
+ files: [
+ {
+ name: 'Vacation itinerary',
+ time: 'Jan 20, 2014',
+ icon: 'file-document-box',
+ color: COLOR.paperBlue500.color
+ },
+ {
+ name: 'Kitchen remodel',
+ time: 'Jan 10, 2014',
+ icon: 'book',
+ color: COLOR.paperYellow500.color
+ }
+ ]
+ }
+ ]
+ },
+ three: {
+ textIcon: [
+ {
+ primaryText: 'Notifications',
+ secondaryText: 'Notify me about updates of app or games I downloaded'
+ },
+ {
+ primaryText: 'Sound',
+ secondaryText: 'Auto-update apps at anytime. Data charges my apply'
+ }
+ ]
+ }
+
};
\ No newline at end of file
diff --git a/src/scenes/Navigation.js b/src/scenes/Navigation.js
index 37550f8..a183797 100644
--- a/src/scenes/Navigation.js
+++ b/src/scenes/Navigation.js
@@ -11,10 +11,32 @@ export default class Navigation extends Component {
navigator: PropTypes.object.isRequired
};
+ constructor(props) {
+ super(props);
+ this.state = {
+ route: AppStore.getState().routeName
+ }
+ }
+
+ componentDidMount = () => {
+ AppStore.listen(this.handleAppStore);
+ };
+
+ componentWillUnmount = () => {
+ AppStore.unlisten(this.handleAppStore);
+ };
+
+ handleAppStore = (store) => {
+ this.setState({
+ route: store.routeName
+ });
+ };
+
changeScene = (name, title) => {
const { drawer, navigator } = this.context;
+ const { route } = this.state;
- if (AppStore.getState().routeName !== name) {
+ if (route !== name) {
try {
let component;
@@ -37,6 +59,9 @@ export default class Navigation extends Component {
case 'List':
component = require('./List').default;
break;
+ case 'IconToggles':
+ component = require('./IconToggles').default;
+ break;
case 'RadioButtons':
component = require('./RadioButtons').default;
break;
@@ -56,7 +81,6 @@ export default class Navigation extends Component {
navigator.replace({ name, component: component });
drawer.closeDrawer();
}
-
} catch (e) {
console.warn('An error occurred loading the scene:', e);
}
@@ -66,60 +90,98 @@ export default class Navigation extends Component {
};
render() {
+ let { route } = this.state;
+ if (!route) {
+ route = 'Welcome';
+ }
+
return (
}>
-
+ } />
React Native Material Design
- this.changeScene('Welcome')}
- />
-
- this.changeScene('Avatars')}
- />
- this.changeScene('Buttons')}
- />
- this.changeScene('Checkboxes')}
+ this.changeScene('Welcome'),
+ onLongPress: () => this.changeScene('Welcome')
+ }]}
/>
- this.changeScene('Dividers')}
+ this.changeScene('Avatars'),
+ onLongPress: () => this.changeScene('Avatars')
+ }, {
+ icon: 'label',
+ value: 'Buttons',
+ active: route === 'Buttons',
+ onPress: () => this.changeScene('Buttons'),
+ onLongPress: () => this.changeScene('Buttons')
+ }, {
+ icon: 'check-box',
+ value: 'Checkboxes',
+ active: route === 'Checkboxes',
+ onPress: () => this.changeScene('Checkboxes'),
+ onLongPress: () => this.changeScene('Checkboxes')
+ }, {
+ icon: 'label',
+ value: 'Dividers',
+ active: route === 'Dividers',
+ onPress: () => this.changeScene('Dividers'),
+ onLongPress: () => this.changeScene('Dividers')
+ }, {
+ icon: 'label',
+ value: 'Icon Toggles',
+ label: 'NEW',
+ active: route === 'Icon Toggles',
+ onPress: () => this.changeScene('IconToggles', 'Icon Toggles'),
+ onLongPress: () => this.changeScene('IconToggles', 'Icon Toggles')
+ }, {
+ icon: 'radio-button-checked',
+ value: 'Radio Buttons',
+ active: route === 'Radio Buttons',
+ onPress: () => this.changeScene('RadioButtons', 'Radio Buttons'),
+ onLongPress: () => this.changeScene('RadioButtons', 'Radio Buttons')
+ },
+ // {
+ //icon: 'list',
+ //value: 'List',
+ //label: 'NEW',
+ //active: route === 'List',
+ //onPress: () => this.changeScene('List'),
+ //onLongPress: () => this.changeScene('List')
+ // },
+ {
+ icon: 'label',
+ value: 'Subheaders',
+ active: route === 'Subheaders',
+ onPress: () => this.changeScene('Subheaders'),
+ onLongPress: () => this.changeScene('Subheaders')
+ }]}
/>
- this.changeScene('RadioButtons')}
+
+ this.changeScene('Themes', 'Change Theme'),
+ onLongPress: () => this.changeScene('Themes', 'Change Theme')
+ }]}
/>
- this.changeScene('Subheaders')}
- />
-
-
- this.changeScene('Themes', 'Change Theme')}
- />
);
}
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 0a06c44..58eb749 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -1,4 +1,5 @@
import { AsyncStorage } from 'react-native';
+import SplashScreen from '@remobile/react-native-splashscreen';
import alt from '../alt';
import AppActions from '../actions/AppActions';
@@ -7,11 +8,10 @@ const THEME = '@Storage:theme';
class AppStore {
constructor() {
- this.routeName = '';
- this.theme = null;
-
this._loadTheme();
+ this.routeName = '';
+
this.bindListeners({
handleUpdateRouteName: AppActions.UPDATE_ROUTE_NAME,
handleUpdateTheme: AppActions.UPDATE_THEME
@@ -21,6 +21,8 @@ class AppStore {
_loadTheme = () => {
AsyncStorage.getItem(THEME).then((value) => {
this.theme = value || 'paperTeal';
+ AppActions.updateTheme(this.theme);
+ SplashScreen.hide();
});
};