kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-26 05:25:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Playground facelift (#3708)

Browse Source 
* wip

* fix imports

* use stylesheet for margin

stylesheet now correct

* also remove old headerLeft

* improve header buttons color

* remove ios button margin
This commit is contained in:
Vojtech Novak
2018-03-13 21:13:19 +01:00
parent 8a84f8523b
commit 6d75ac9193
20 changed files with 103 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,6 @@
import React from 'react';
import {
Button,
Platform,
ScrollView,
StyleSheet,
@@ -20,6 +19,7 @@ import {
TabRouter,
} from 'react-navigation';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>

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

@@ -1,7 +1,6 @@
import React, { Component, PropTypes } from 'react';
import {
Animated,
Button,
Easing,
Image,
Platform,
@@ -17,6 +16,7 @@ import {
createNavigator,
} from 'react-navigation';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<SafeAreaView forceInset={{ top: 'always' }}>

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

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, Platform, ScrollView, StatusBar } from 'react-native';
import { Platform, ScrollView, StatusBar } from 'react-native';
import {
StackNavigator,
DrawerNavigator,
@@ -11,6 +11,7 @@ import {
} from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>

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

@@ -3,9 +3,10 @@
*/
import React from 'react';
import { Button, ScrollView, StatusBar, Text } from 'react-native';
import { ScrollView, StatusBar, Text } from 'react-native';
import { SafeAreaView, StackNavigator } from 'react-navigation';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>
@@ -31,7 +32,8 @@ const MyNavScreen = ({ navigation, banner }) => (
headerVisible:
!navigation.state.params ||
!navigation.state.params.headerVisible,
})}
})
}
/>
)}
<Button onPress={() => navigation.goBack(null)} title="Go back" />

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

@@ -3,10 +3,11 @@
*/
import React from 'react';
import { Button, Platform, ScrollView, StyleSheet } from 'react-native';
import { Platform, ScrollView, StyleSheet } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView style={styles.container}>

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

@@ -8,9 +8,11 @@ import type {
} from 'react-navigation';
import * as React from 'react';
import { Button, ScrollView, StatusBar } from 'react-native';
import { ScrollView, StatusBar } from 'react-native';
import { StackNavigator, SafeAreaView, withNavigation } from 'react-navigation';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
import { HeaderButtons } from './commonComponents/HeaderButtons';
type MyNavScreenProps = {
navigation: NavigationScreenProp<*>,
@@ -19,7 +21,11 @@ type MyNavScreenProps = {
class MyBackButton extends React.Component<any, any> {
render() {
return <Button onPress={this._navigateBack} title="Custom Back" />;
return (
<HeaderButtons>
<HeaderButtons.Item title="Back" onPress={this._navigateBack} />
</HeaderButtons>
);
}
_navigateBack = () => {
@@ -169,12 +175,14 @@ MyProfileScreen.navigationOptions = props => {
// Render a button on the right side of the header.
// When pressed switches the screen to edit mode.
headerRight: (
<Button
title={params.mode === 'edit' ? 'Done' : 'Edit'}
onPress={() =>
setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
}
/>
<HeaderButtons>
<HeaderButtons.Item
title={params.mode === 'edit' ? 'Done' : 'Edit'}
onPress={() =>
setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
}
/>
</HeaderButtons>
),
};
};

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

@@ -8,10 +8,11 @@ import type {
} from 'react-navigation';
import React from 'react';
import { Button, Platform, ScrollView, StatusBar, View } from 'react-native';
import { 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';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>

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

@@ -4,8 +4,9 @@
import type { NavigationScreenProp } from 'react-navigation';
import * as React from 'react';
import { Button, ScrollView, StatusBar } from 'react-native';
import { ScrollView, StatusBar } from 'react-native';
import { StackNavigator, SafeAreaView } from 'react-navigation';
import { Button } from './commonComponents/ButtonWithMargin';
type NavScreenProps = {
navigation: NavigationScreenProp<*>,

17
packages/react-navigation/examples/NavigationPlayground/js/StackWithTranslucentHeader.js vendored
View File

@@ -12,7 +12,6 @@ import { isIphoneX } from 'react-native-iphone-x-helper';
import * as React from 'react';
import { BlurView, Constants } from 'expo';
import {
Button,
Dimensions,
Platform,
ScrollView,
@@ -21,6 +20,8 @@ import {
} from 'react-native';
import { Header, StackNavigator } from 'react-navigation';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
import { HeaderButtons } from './commonComponents/HeaderButtons';
type MyNavScreenProps = {
navigation: NavigationScreenProp<*>,
@@ -193,12 +194,14 @@ MyProfileScreen.navigationOptions = props => {
// Render a button on the right side of the header.
// When pressed switches the screen to edit mode.
headerRight: (
<Button
title={params.mode === 'edit' ? 'Done' : 'Edit'}
onPress={() =>
setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
}
/>
<HeaderButtons>
<HeaderButtons.Item
title={params.mode === 'edit' ? 'Done' : 'Edit'}
onPress={() =>
setParams({ mode: params.mode === 'edit' ? '' : 'edit' })
}
/>
</HeaderButtons>
),
};
};

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

@@ -3,11 +3,12 @@
*/
import React from 'react';
import { Button, ScrollView, StatusBar } from 'react-native';
import { ScrollView, StatusBar } from 'react-native';
import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>

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

@@ -3,11 +3,12 @@
*/
import React from 'react';
import { Button, ScrollView, StatusBar } from 'react-native';
import { ScrollView, StatusBar } from 'react-native';
import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>

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

@@ -1,6 +1,7 @@
import React from 'react';
import { Button, StatusBar, Text, View } from 'react-native';
import { StatusBar, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import { Button } from './commonComponents/ButtonWithMargin';
class HomeScreen extends React.Component<any, any> {
render() {

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

@@ -6,12 +6,12 @@ import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet,
View,
} from 'react-native';
import { StackNavigator, SwitchNavigator } from 'react-navigation';
import { Button } from './commonComponents/ButtonWithMargin';
class SignInScreen extends React.Component<any, any> {
static navigationOptions = {

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

@@ -3,8 +3,9 @@
*/
import React from 'react';
import { Animated, Button, ScrollView, StatusBar } from 'react-native';
import { Animated, ScrollView, StatusBar } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import { Button } from './commonComponents/ButtonWithMargin';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SampleText from './SampleText';
@@ -115,7 +116,7 @@ const TabAnimations = TabNavigator(
{
tabBarPosition: 'bottom',
animationEnabled: true,
configureTransition: (currentTransitionProps,nextTransitionProps) => ({
configureTransition: (currentTransitionProps, nextTransitionProps) => ({
timing: Animated.spring,
tension: 1,
friction: 35,

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

@@ -3,7 +3,7 @@
*/
import React from 'react';
import { Button, Platform, ScrollView } from 'react-native';
import { Platform, ScrollView } from 'react-native';
import { TabNavigator, DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import SimpleTabs from './SimpleTabs';

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

@@ -3,9 +3,10 @@
*/
import React from 'react';
import { Button, SafeAreaView, Text } from 'react-native';
import { SafeAreaView, Text } from 'react-native';
import { TabNavigator, withNavigationFocus } from 'react-navigation';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';

18
packages/react-navigation/examples/NavigationPlayground/js/commonComponents/ButtonWithMargin.js vendored Normal file
View File

@@ -0,0 +1,18 @@
import { Button as RNButton, StyleSheet, View, Platform } from 'react-native';
import React from 'react';
export const Button = props => (
<View style={styles.margin}>
<RNButton {...props} />
</View>
);
const styles = StyleSheet.create({
margin: {
...Platform.select({
android: {
margin: 10,
},
}),
},
});

16
packages/react-navigation/examples/NavigationPlayground/js/commonComponents/HeaderButtons.js vendored Normal file
View File

@@ -0,0 +1,16 @@
import DefaultHeaderButtons from 'react-navigation-header-buttons';
import * as React from 'react';
import { Platform } from 'react-native';
export class HeaderButtons extends React.PureComponent {
static Item = DefaultHeaderButtons.Item;
render() {
return (
<DefaultHeaderButtons
color={Platform.OS === 'ios' ? '#037aff' : 'black'}
{...this.props}
/>
);
}
}

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

@@ -15,7 +15,8 @@
"react": "16.2.0",
"react-native": "^0.52.0",
"react-native-iphone-x-helper": "^1.0.2",
"react-navigation": "link:../.."
"react-navigation": "link:../..",
"react-navigation-header-buttons": "^0.0.4"
},
"devDependencies": {
"babel-jest": "^21.0.0",

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

@@ -5145,6 +5145,10 @@ react-devtools-core@3.0.0:
shell-quote "^1.6.1"
ws "^2.0.3"
react-lifecycles-compat@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
react-native-branch@2.0.0-beta.3:
version "2.0.0-beta.3"
resolved "https://registry.yarnpkg.com/react-native-branch/-/react-native-branch-2.0.0-beta.3.tgz#2167af86bbc9f964bd45bd5f37684e5b54965e32"
@@ -5181,6 +5185,10 @@ react-native-maps@0.19.0:
version "0.19.0"
resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-0.19.0.tgz#ce94fad1cf360e335cb4338a68c95f791e869074"
react-native-platform-touchable@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz#fde4acc65eea585d28b164d0c3716a42129a68e4"
react-native-safe-area-view@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421"
@@ -5293,6 +5301,12 @@ react-native@^0.52.0:
xmldoc "^0.4.0"
yargs "^9.0.0"
react-navigation-header-buttons@^0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/react-navigation-header-buttons/-/react-navigation-header-buttons-0.0.4.tgz#90dd7617aec31eeb35c600eb90afe40f9b0dc43b"
dependencies:
react-native-platform-touchable "^1.1.1"
"react-navigation@link:../..":
version "0.0.0"
uid ""