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

Add react-native-tabs as export from react-navigation

Browse Source
This commit is contained in:
Brent Vatne
2018-03-18 17:50:02 -04:00
parent a9d8f2e03e
commit e6559f5878
13 changed files with 163 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/NavigationPlayground/js/App.js
View File

@@ -32,7 +32,6 @@ import SimpleStack from './SimpleStack';
import StackWithHeaderPreset from './StackWithHeaderPreset';
import StackWithTranslucentHeader from './StackWithTranslucentHeader';
import SimpleTabs from './SimpleTabs';
import TabAnimations from './TabAnimations';
import TabsWithNavigationFocus from './TabsWithNavigationFocus';
const ExampleInfo = {
@@ -106,10 +105,6 @@ const ExampleInfo = {
name: 'Link to Settings Tab',
description: 'Deep linking into a route in tab',
},
TabAnimations: {
name: 'Animated Tabs Example',
description: 'Tab transitions have custom animations',
},
TabsWithNavigationFocus: {
name: 'withNavigationFocus',
description: 'Receive the focus prop to know when a screen is focused',
@@ -141,7 +136,6 @@ const ExampleRoutes = {
screen: SimpleTabs,
path: 'settings',
},
TabAnimations,
TabsWithNavigationFocus,
};

6
examples/NavigationPlayground/js/SimpleTabs.js
View File

@@ -9,7 +9,7 @@ import type {
import React from 'react';
import { Platform, ScrollView, StatusBar, View } from 'react-native';
import { SafeAreaView, createTabNavigator } from 'react-navigation';
import { SafeAreaView, createBottomTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SampleText from './SampleText';
import { Button } from './commonComponents/ButtonWithMargin';
@@ -144,7 +144,7 @@ MySettingsScreen.navigationOptions = {
),
};
const SimpleTabs = createTabNavigator(
const SimpleTabs = createBottomTabNavigator(
{
Home: {
screen: MyHomeScreen,
@@ -164,8 +164,6 @@ const SimpleTabs = createTabNavigator(
},
},
{
lazy: true,
removeClippedSubviews: true,
tabBarOptions: {
activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
},

7
examples/NavigationPlayground/js/StacksInTabs.js
View File

@@ -7,7 +7,7 @@ import { ScrollView, StatusBar } from 'react-native';
import {
SafeAreaView,
createStackNavigator,
createTabNavigator,
createBottomTabNavigator,
} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -89,7 +89,7 @@ const SettingsTab = createStackNavigator({
},
});
const StacksInTabs = createTabNavigator(
const StacksInTabs = createBottomTabNavigator(
{
MainTab: {
screen: MainTab,
@@ -121,9 +121,6 @@ const StacksInTabs = createTabNavigator(
},
},
{
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
tabBarOptions: {
showLabel: false,
},

4
examples/NavigationPlayground/js/StacksOverTabs.js
View File

@@ -7,7 +7,7 @@ import { ScrollView, StatusBar } from 'react-native';
import {
SafeAreaView,
createStackNavigator,
createTabNavigator,
createBottomTabNavigator,
} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -55,7 +55,7 @@ const MySettingsScreen = ({ navigation }) => (
<MyNavScreen banner="Settings Screen" navigation={navigation} />
);
const TabNav = createTabNavigator(
const TabNav = createBottomTabNavigator(
{
MainTab: {
screen: MyHomeScreen,

128
examples/NavigationPlayground/js/TabAnimations.js
View File

@@ -1,128 +0,0 @@
/**
* @flow
*/
import React from 'react';
import { Animated, ScrollView, StatusBar } from 'react-native';
import { createStackNavigator, createTabNavigator } from 'react-navigation';
import { Button } from './commonComponents/ButtonWithMargin';
import Ionicons from 'react-native-vector-icons/Ionicons';
import SampleText from './SampleText';
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>
<SampleText>{banner}</SampleText>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
title="Open profile screen"
/>
<Button
onPress={() => navigation.navigate('NotifSettings')}
title="Open notifications screen"
/>
<Button
onPress={() => navigation.navigate('SettingsTab')}
title="Go to settings tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
<StatusBar barStyle="default" />
</ScrollView>
);
const MyHomeScreen = ({ navigation }) => (
<MyNavScreen banner="Home Screen" navigation={navigation} />
);
const MyProfileScreen = ({ navigation }) => (
<MyNavScreen
banner={`${navigation.state.params.name}s Profile`}
navigation={navigation}
/>
);
const MyNotificationsSettingsScreen = ({ navigation }) => (
<MyNavScreen banner="Notifications Screen" navigation={navigation} />
);
const MySettingsScreen = ({ navigation }) => (
<MyNavScreen banner="Settings Screen" navigation={navigation} />
);
const MainTab = createStackNavigator({
Home: {
screen: MyHomeScreen,
path: '/',
navigationOptions: {
title: 'Welcome',
},
},
Profile: {
screen: MyProfileScreen,
path: '/people/:name',
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.name}'s Profile!`,
}),
},
});
const SettingsTab = createStackNavigator({
Settings: {
screen: MySettingsScreen,
path: '/',
navigationOptions: () => ({
title: 'Settings',
}),
},
NotifSettings: {
screen: MyNotificationsSettingsScreen,
navigationOptions: {
title: 'Notifications',
},
},
});
const TabAnimations = createTabNavigator(
{
MainTab: {
screen: MainTab,
path: '/',
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{ color: tintColor }}
/>
),
},
},
SettingsTab: {
screen: SettingsTab,
path: '/settings',
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor, focused }) => (
<Ionicons
name={focused ? 'ios-settings' : 'ios-settings-outline'}
size={26}
style={{ color: tintColor }}
/>
),
},
},
},
{
tabBarPosition: 'bottom',
animationEnabled: true,
configureTransition: (currentTransitionProps, nextTransitionProps) => ({
timing: Animated.spring,
tension: 1,
friction: 35,
}),
swipeEnabled: false,
}
);
export default TabAnimations;

2
examples/NavigationPlayground/js/TabsInDrawer.js
View File

@@ -4,7 +4,7 @@
import React from 'react';
import { Platform, ScrollView } from 'react-native';
import { createTabNavigator, createDrawerNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import SimpleTabs from './SimpleTabs';
import StacksOverTabs from './StacksOverTabs';

41
examples/NavigationPlayground/js/TabsWithNavigationFocus.js
View File

@@ -3,8 +3,11 @@
*/
import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import { createTabNavigator, withNavigationFocus } from 'react-navigation';
import { SafeAreaView, StatusBar, Text, View } from 'react-native';
import {
createBottomTabNavigator,
withNavigationFocus,
} from 'react-navigation';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { Button } from './commonComponents/ButtonWithMargin';
@@ -66,9 +69,10 @@ const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
/>
)}
<Button
onPress={() => this.props.navigation.goBack(null)}
onPress={() => this.props.navigation.dismiss()}
title="Back to other examples"
/>
<StatusBar barStyle="default" />
</SafeAreaView>
);
}
@@ -76,27 +80,16 @@ const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
return withNavigationFocus(TabScreen);
};
const TabsWithNavigationFocus = createTabNavigator(
{
One: {
screen: createTabScreen('One', 'numeric-1-box-outline', 'numeric-1-box'),
},
Two: {
screen: createTabScreen('Two', 'numeric-2-box-outline', 'numeric-2-box'),
},
Three: {
screen: createTabScreen(
'Three',
'numeric-3-box-outline',
'numeric-3-box'
),
},
const TabsWithNavigationFocus = createBottomTabNavigator({
One: {
screen: createTabScreen('One', 'numeric-1-box-outline', 'numeric-1-box'),
},
{
tabBarPosition: 'bottom',
animationEnabled: true,
swipeEnabled: true,
}
);
Two: {
screen: createTabScreen('Two', 'numeric-2-box-outline', 'numeric-2-box'),
},
Three: {
screen: createTabScreen('Three', 'numeric-3-box-outline', 'numeric-3-box'),
},
});
export default TabsWithNavigationFocus;