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

Move examples to https://github.com/react-navigation/examples

Browse Source
This commit is contained in:
Brent Vatne
2018-01-17 12:43:24 -08:00
parent 99c4d448b2
commit 36775007b0
70 changed files with 6 additions and 26715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/SafeAreaExample/.babelrc
View File

@@ -1,8 +0,0 @@
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}

3
examples/SafeAreaExample/.gitignore vendored
View File

@@ -1,3 +0,0 @@
node_modules/**/*
.expo/*
npm-debug.*

1
examples/SafeAreaExample/.watchmanconfig
View File

@@ -1 +0,0 @@
{}

244
examples/SafeAreaExample/App.js
View File

@@ -1,244 +0,0 @@
import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { StackNavigator, withNavigation } from 'react-navigation';
import { Constants } from 'expo';
import Touchable from 'react-native-platform-touchable';
import TabsScreen from './screens/TabsScreen';
import DrawerScreen from './screens/DrawerScreen';
import createDumbStack from './screens/createDumbStack';
import createDumbTabs from './screens/createDumbTabs';
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
@withNavigation
class ExampleItem extends React.Component {
render() {
return (
<View
style={{
borderBottomColor: '#eee',
borderBottomWidth: 1,
}}>
<Touchable
onPress={this._handlePress}
style={{
height: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: this.props.common ? '#fffcd3' : '#fff',
}}>
<Text style={{ fontSize: 15 }}>
{this.props.title} {this.props.common ? '(commonly used)' : null}
</Text>
</Touchable>
</View>
);
}
_handlePress = () => {
this.props.navigation.navigate(this.props.route);
};
}
class ExampleListScreen extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{ paddingTop: 50, backgroundColor: '#fff' }}>
<Text
style={{
fontSize: 25,
textAlign: 'center',
marginBottom: 20,
paddingBottom: 20,
}}>
SafeAreaView Examples
</Text>
<ExampleItem title="Basic Tabs" route="tabs" common />
{/* <ExampleItem title="Basic Drawer" route="drawer" /> */}
<ExampleItem title="Header height" route="headerHeight" common />
<ExampleItem title="Header padding" route="headerPadding" />
<ExampleItem
title="Header height and padding"
route="headerHeightAndPadding"
/>
<ExampleItem
title="Header padding as percent"
route="headerPaddingPercent"
/>
<ExampleItem title="Header with margin" route="headerMargin" />
<ExampleItem title="Tab bar height" route="tabBarHeight" common />
<ExampleItem title="Tab bar padding" route="tabBarPadding" common />
<ExampleItem
common
title="Tab bar height and padding"
route="tabBarHeightAndPadding"
/>
<ExampleItem title="Tab bar margin" route="tabBarMargin" />
</ScrollView>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: Constants.statusBarHeight,
backgroundColor: '#fff',
}}
/>
</View>
);
}
}
const StackWithHeaderHeight = createDumbStack({
title: 'height: 150',
headerStyle: { height: 150 },
});
const StackWithHeaderPadding = createDumbStack({
title: 'padding: 100',
headerStyle: { padding: 100 },
});
const StackWithHeaderHeightAndPadding = createDumbStack({
title: 'height: 150, padding: 100',
headerStyle: { height: 150, padding: 100 },
});
const StackWithHeaderPaddingPercent = createDumbStack({
title: 'padding: 60%',
headerStyle: { padding: '60%' },
});
const StackWithHeaderMargin = createDumbStack({
title: 'margin: 20 (but why? :/)',
headerStyle: { margin: 20 },
});
const TabBarWithHeight = createDumbTabs(
{
tabBarLabel: 'label!',
tabBarOptions: {
style: {
height: 100,
},
},
},
createDumbStack({
title: 'tabBar height 100',
})
);
const TabBarWithPadding = createDumbTabs(
{
tabBarLabel: 'label!',
tabBarOptions: {
style: {
padding: 20,
},
},
},
createDumbStack({
title: 'tabBar padding 20',
})
);
const TabBarWithHeightAndPadding = createDumbTabs(
{
tabBarLabel: 'label!',
tabBarOptions: {
style: {
padding: 20,
height: 100,
},
},
},
createDumbStack({
title: 'tabBar height 100 padding 20',
})
);
const TabBarWithMargin = createDumbTabs(
{
tabBarLabel: 'label!',
tabBarOptions: {
style: {
margin: 20,
},
},
},
createDumbStack({
title: 'tabBar margin 20',
})
);
const RootStack = StackNavigator(
{
exampleList: {
screen: ExampleListScreen,
},
tabs: {
screen: TabsScreen,
},
headerHeight: {
screen: StackWithHeaderHeight,
},
headerPadding: {
screen: StackWithHeaderPadding,
},
headerHeightAndPadding: {
screen: StackWithHeaderHeightAndPadding,
},
headerPaddingPercent: {
screen: StackWithHeaderPaddingPercent,
},
headerMargin: {
screen: StackWithHeaderMargin,
},
tabBarHeight: {
screen: TabBarWithHeight,
},
tabBarPadding: {
screen: TabBarWithPadding,
},
tabBarHeightAndPadding: {
screen: TabBarWithHeightAndPadding,
},
tabBarMargin: {
screen: TabBarWithMargin,
},
},
{
headerMode: 'none',
cardStyle: {
backgroundColor: '#fff',
},
}
);
// basic tabs (different navbar color, different tabbar color)
// different header height
// different header padding
// different header height and padding
// different header margin
// different tabbar height
// different tabbar padding
// different tabbar height and padding
// different tabbar margin
// without navbar, without safeareaview in one tab and with safeareaview in another tab
// all should be able to toggle between landscape and portrait
// basic drawer (different navbar color, mess around with drawer options)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

23
examples/SafeAreaExample/app.json
View File

@@ -1,23 +0,0 @@
{
"expo": {
"name": "SafeAreaExample",
"description": "An empty new project",
"slug": "SafeAreaExample",
"privacy": "public",
"sdkVersion": "22.0.0",
"version": "1.0.0",
"primaryColor": "#cccccc",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"packagerOpts": {
"assetExts": ["ttf", "mp4"]
},
"ios": {
"supportsTablet": true
}
}
}

BIN
examples/SafeAreaExample/assets/icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
examples/SafeAreaExample/assets/splash.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

15
examples/SafeAreaExample/package.json
View File

@@ -1,15 +0,0 @@
{
"main": "node_modules/expo/AppEntry.js",
"private": true,
"dependencies": {
"expo": "^23.0.0",
"react": "16.0.0",
"react-native": "^0.50.3",
"react-native-platform-touchable": "^1.1.1",
"react-navigation": "file:../.."
},
"name": "SafeAreaExample",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null
}

0
examples/SafeAreaExample/screens/DrawerScreen.js
View File

3
examples/SafeAreaExample/screens/DumbStack.js
View File

@@ -1,3 +0,0 @@
import createDumbStack from './createDumbStack';
export default createDumbStack();

3
examples/SafeAreaExample/screens/TabsScreen.js
View File

@@ -1,3 +0,0 @@
import createDumbTabs from './createDumbTabs';
export default createDumbTabs();

99
examples/SafeAreaExample/screens/createDumbStack.js
View File

@@ -1,99 +0,0 @@
import React from 'react';
import { StackNavigator } from 'react-navigation';
import {
Dimensions,
Button,
Platform,
ScrollView,
Text,
View,
StatusBar,
} from 'react-native';
import { ScreenOrientation } from 'expo';
const Separator = () => (
<View
style={{
width: Dimensions.get('window').width - 100,
height: 1,
backgroundColor: '#ccc',
marginHorizontal: 50,
marginTop: 15,
marginBottom: 15,
}}
/>
);
const Spacer = () => (
<View
style={{
marginBottom: Platform.OS === 'android' ? 20 : 5,
}}
/>
);
export default (navigationOptions = {}) => {
class DumbScreen extends React.Component {
static navigationOptions = {
title: 'Title!',
...navigationOptions,
headerStyle: {
backgroundColor: '#6b52ae',
...navigationOptions.headerStyle,
},
headerTitleStyle: {
color: '#fff',
...navigationOptions.headerTitleStyle,
},
};
render() {
return (
<ScrollView style={{ flex: 1 }}>
<View
style={{
paddingTop: 30,
alignItems: 'center',
justifyContent: 'center',
}}>
<Button onPress={this._goBack} title="Go back" />
<Separator />
<Button onPress={this._setPortrait} title="Set portrait" />
<Spacer />
<Button onPress={this._setLandscape} title="Set landscape" />
<Separator />
<Button onPress={this._hideStatusBar} title="Hide status bar" />
<Spacer />
<Button onPress={this._showStatusBar} title="Show status bar" />
</View>
</ScrollView>
);
}
_goBack = () => {
this.props.navigation.goBack(null);
};
_setPortrait = () => {
ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);
};
_setLandscape = () => {
ScreenOrientation.allow(ScreenOrientation.Orientation.LANDSCAPE);
};
_hideStatusBar = () => {
StatusBar.setHidden(true, 'slide');
};
_showStatusBar = () => {
StatusBar.setHidden(false, 'slide');
};
}
return StackNavigator({
dumb: {
screen: DumbScreen,
},
});
};

69
examples/SafeAreaExample/screens/createDumbTabs.js
View File

@@ -1,69 +0,0 @@
import React from 'react';
import { Platform, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import createDumbStack from './createDumbStack';
export default (navigationOptions = {}, DumbStack = createDumbStack()) => {
return TabNavigator(
{
Home: {
screen: DumbStack,
},
Links: {
screen: DumbStack,
},
Settings: {
screen: DumbStack,
},
},
{
navigationOptions: ({ navigation }) => ({
...navigationOptions,
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let iconName;
switch (routeName) {
case 'Home':
iconName =
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle';
break;
case 'Links':
iconName =
Platform.OS === 'ios'
? `ios-link${focused ? '' : '-outline'}`
: 'md-link';
break;
case 'Settings':
iconName =
Platform.OS === 'ios'
? `ios-options${focused ? '' : '-outline'}`
: 'md-options';
}
return (
<Ionicons
name={iconName}
size={28}
style={{ marginBottom: -3 }}
color={focused ? '#6b52ae' : '#ccc'}
/>
);
},
}),
tabBarOptions: {
activeTintColor: '#6b52ae',
...navigationOptions.tabBarOptions,
style: {
backgroundColor: '#F5F1FF',
...(navigationOptions.tabBarOptions ? navigationOptions.tabBarOptions.style : {}),
}
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
};

4045
examples/SafeAreaExample/yarn.lock
View File

File diff suppressed because it is too large Load Diff