kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-09 22:51:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix example project

Browse Source
This commit is contained in:
Brent Vatne
2017-12-20 13:35:35 -08:00
parent a97cddebe2
commit 85a6b131d9
15 changed files with 905 additions and 913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-navigation/examples/NavigationPlayground/app.json
View File

@@ -12,7 +12,7 @@
"icon": "./assets/icons/react-navigation.png",
"hideExponentText": false
},
"sdkVersion": "23.0.0",
"sdkVersion": "24.0.0",
"entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"packagerOpts": {
"assetExts": [

90
packages/react-navigation/examples/NavigationPlayground/js/App.js vendored
View File

@@ -1,7 +1,7 @@
/* @flow */
import React from 'react';
import { ScreenOrientation } from 'expo';
import { Constants, ScreenOrientation } from 'expo';
ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
@@ -11,6 +11,7 @@ import {
StyleSheet,
TouchableOpacity,
Text,
StatusBar,
View,
} from 'react-native';
import { SafeAreaView, StackNavigator } from 'react-navigation';
@@ -44,11 +45,11 @@ const ExampleRoutes = {
description: 'Android-style drawer navigation',
screen: Drawer,
},
MultipleDrawer: {
name: 'Multiple Drawer Example',
description: 'Add any drawer you need',
screen: MultipleDrawer,
},
// MultipleDrawer: {
// name: 'Multiple Drawer Example',
// description: 'Add any drawer you need',
// screen: MultipleDrawer,
// },
TabsInDrawer: {
name: 'Drawer + Tabs Example',
description: 'A drawer combined with tabs',
@@ -104,34 +105,47 @@ const ExampleRoutes = {
},
};
const MainScreen = ({ navigation }) => (
<ScrollView style={{ flex: 1 }} contentInsetAdjustmentBehavior="automatic">
<Banner />
{Object.keys(ExampleRoutes).map((routeName: string) => (
<TouchableOpacity
key={routeName}
onPress={() => {
const { path, params, screen } = ExampleRoutes[routeName];
const { router } = screen;
const action = path && router.getActionForPathAndParams(path, params);
navigation.navigate(routeName, {}, action);
}}
>
<SafeAreaView
style={styles.itemContainer}
forceInset={{ vertical: 'never' }}
>
<View style={styles.item}>
<Text style={styles.title}>{ExampleRoutes[routeName].name}</Text>
<Text style={styles.description}>
{ExampleRoutes[routeName].description}
</Text>
</View>
</SafeAreaView>
</TouchableOpacity>
))}
</ScrollView>
);
class MainScreen extends React.Component<*> {
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1 }}>
<ScrollView style={{ flex: 1 }}>
<Banner />
{Object.keys(ExampleRoutes).map((routeName: string) => (
<TouchableOpacity
key={routeName}
onPress={() => {
const { path, params, screen } = ExampleRoutes[routeName];
const { router } = screen;
const action =
path && router.getActionForPathAndParams(path, params);
navigation.navigate(routeName, {}, action);
}}
>
<SafeAreaView
style={styles.itemContainer}
forceInset={{ vertical: 'never' }}
>
<View style={styles.item}>
<Text style={styles.title}>
{ExampleRoutes[routeName].name}
</Text>
<Text style={styles.description}>
{ExampleRoutes[routeName].description}
</Text>
</View>
</SafeAreaView>
</TouchableOpacity>
))}
</ScrollView>
<StatusBar barStyle="light-content" />
<View style={styles.statusBarUnderlay} />
</View>
);
}
}
const AppNavigator = StackNavigator(
{
@@ -171,6 +185,14 @@ const styles = StyleSheet.create({
marginBottom: 20,
resizeMode: 'contain',
},
statusBarUnderlay: {
backgroundColor: '#673ab7',
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: Constants.statusBarHeight,
},
title: {
fontSize: 16,
fontWeight: 'bold',

1
packages/react-navigation/examples/NavigationPlayground/js/Banner.js vendored
View File

@@ -22,6 +22,7 @@ export default Banner;
const styles = StyleSheet.create({
bannerContainer: {
backgroundColor: '#673ab7',
paddingTop: 20,
},
banner: {
flexDirection: 'row',

2
packages/react-navigation/examples/NavigationPlayground/js/CustomTabs.js vendored
View File

@@ -8,6 +8,7 @@ import {
Platform,
ScrollView,
StyleSheet,
StatusBar,
Text,
TouchableOpacity,
View,
@@ -32,6 +33,7 @@ const MyNavScreen = ({ navigation, banner }) => (
title="Go back"
/>
</SafeAreaView>
<StatusBar barStyle="default" />
</ScrollView>
);

12
packages/react-navigation/examples/NavigationPlayground/js/CustomTransitioner.js vendored
View File

@@ -1,12 +1,13 @@
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Platform,
Easing,
View,
Animated,
Image,
Button,
Easing,
Image,
Platform,
StatusBar,
StyleSheet,
View,
} from 'react-native';
import {
Transitioner,
@@ -30,6 +31,7 @@ const MyNavScreen = ({ navigation, banner }) => (
)}
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</SafeAreaView>
);

6
packages/react-navigation/examples/NavigationPlayground/js/Drawer.js vendored
View File

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, Platform, ScrollView } from 'react-native';
import { Button, Platform, ScrollView, StatusBar } from 'react-native';
import { DrawerNavigator, SafeAreaView } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import SampleText from './SampleText';
@@ -18,6 +18,7 @@ const MyNavScreen = ({ navigation, banner }) => (
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
<StatusBar barStyle="default" />
</ScrollView>
);
@@ -57,6 +58,9 @@ const DrawerExample = DrawerNavigator(
},
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
initialRouteName: 'Drafts',
contentOptions: {
activeTintColor: '#e91e63',

3
packages/react-navigation/examples/NavigationPlayground/js/ModalStack.js vendored
View File

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, ScrollView, Text } from 'react-native';
import { Button, ScrollView, StatusBar, Text } from 'react-native';
import { SafeAreaView, StackNavigator } from 'react-navigation';
import SampleText from './SampleText';
@@ -36,6 +36,7 @@ const MyNavScreen = ({ navigation, banner }) => (
)}
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
<StatusBar barStyle="default" />
</ScrollView>
);

8
packages/react-navigation/examples/NavigationPlayground/js/MultipleDrawer.js vendored
View File

@@ -55,6 +55,9 @@ const DrawerExample = DrawerNavigator(
},
},
{
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
initialRouteName: 'Drafts',
contentOptions: {
activeTintColor: '#e91e63',
@@ -67,8 +70,9 @@ const MainDrawerExample = DrawerNavigator({
screen: DrawerExample,
},
}, {
drawerOpenRoute: 'FooDrawerOpen',
drawerCloseRoute: 'FooDrawerClose',
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
});
const styles = StyleSheet.create({

3
packages/react-navigation/examples/NavigationPlayground/js/SimpleStack.js vendored
View File

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, ScrollView } from 'react-native';
import { Button, ScrollView, StatusBar } from 'react-native';
import { StackNavigator, SafeAreaView } from 'react-navigation';
import SampleText from './SampleText';
@@ -19,6 +19,7 @@ const MyNavScreen = ({ navigation, banner }) => (
title="Go to a photos screen"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</SafeAreaView>
);

3
packages/react-navigation/examples/NavigationPlayground/js/SimpleTabs.js vendored
View File

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, Platform, ScrollView, View } from 'react-native';
import { Button, Platform, ScrollView, StatusBar, View } from 'react-native';
import { SafeAreaView, TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SampleText from './SampleText';
@@ -20,6 +20,7 @@ const MyNavScreen = ({ navigation, banner }) => (
title="Go to settings tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</SafeAreaView>
);

4
packages/react-navigation/examples/NavigationPlayground/js/StacksInTabs.js vendored
View File

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, ScrollView } from 'react-native';
import { Button, ScrollView, StatusBar } from 'react-native';
import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -27,6 +27,8 @@ const MyNavScreen = ({ navigation, banner }) => (
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
<StatusBar barStyle="default" />
</ScrollView>
);

3
packages/react-navigation/examples/NavigationPlayground/js/StacksOverTabs.js vendored
View File

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, ScrollView } from 'react-native';
import { Button, ScrollView, StatusBar } from 'react-native';
import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -27,6 +27,7 @@ const MyNavScreen = ({ navigation, banner }) => (
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
<StatusBar barStyle="default" />
</ScrollView>
);

3
packages/react-navigation/examples/NavigationPlayground/js/TabAnimations.js vendored
View File

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, ScrollView, Animated } from 'react-native';
import { Animated, Button, ScrollView, StatusBar } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -25,6 +25,7 @@ const MyNavScreen = ({ navigation, banner }) => (
title="Go to settings tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</ScrollView>
);

8
packages/react-navigation/examples/NavigationPlayground/package.json
View File

@@ -12,19 +12,19 @@
"test": "node node_modules/jest/bin/jest.js"
},
"dependencies": {
"expo": "^23.0.0",
"expo": "^24.0.2",
"react": "16.0.0",
"react-native": "^0.50.3",
"react-native": "^0.51.0",
"react-navigation": "file:../.."
},
"devDependencies": {
"babel-jest": "^21.0.0",
"flow-bin": "^0.56.0",
"jest": "^21.0.1",
"jest-expo": "^23.0.0",
"jest-expo": "^24.0.0",
"react-addons-test-utils": "16.0.0-alpha.3",
"react-native-scripts": "^1.5.0",
"react-test-renderer": "16.0.0-alpha.12"
"react-test-renderer": "16.0.0-alpha.3"
},
"jest": {
"preset": "jest-expo",

1670
packages/react-navigation/examples/NavigationPlayground/yarn.lock
View File

File diff suppressed because it is too large Load Diff