kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-05-15 16:23:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update examples

Browse Source
This commit is contained in:
Satyajit Sahoo
2018-06-05 15:35:17 +02:00
parent e4a579f518
commit 1d00dbdf76
18 changed files with 1270 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/material-bottom-tabs/.editorconfig Normal file
View File

@@ -0,0 +1,21 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

3
packages/material-bottom-tabs/.eslintignore Normal file
View File

@@ -0,0 +1,3 @@
node_modules/
flow-typed/
dist/

10
packages/material-bottom-tabs/.eslintrc Normal file
View File

@@ -0,0 +1,10 @@
{
"extends": "eslint-config-satya164",
"plugins": ["react-native-globals"],
"env": {
"es6": true,
"react-native-globals/all": true,
}
}

80
packages/material-bottom-tabs/.flowconfig Normal file
View File

@@ -0,0 +1,80 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js
; Ignore templates for 'react-native init'
.*/local-cli/templates/.*
; Ignore the Dangerfile
<PROJECT_ROOT>/bots/dangerfile.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*
; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
; Ignore polyfills
.*/Libraries/polyfills/.*
; Ignore metro
.*/node_modules/metro/.*
; Ignore duplicate modules under example/
.*/example/node_modules/fbjs/.*
.*/example/node_modules/fbemitter/.*
.*/example/node_modules/react/.*
.*/example/node_modules/react-native/.*
.*/example/\.buckd/
; Ignore duplicate modules under docs/
.*/docs/node_modules/fbjs/.*
.*/docs/node_modules/react/.*
; Ignore some modules we don't need to parse
.*/node_modules/prettier/.*
.*/node_modules/eslint.*
.*/node_modules/reqwest/tests/fixtures/.*
[untyped]
.*/node_modules/expo/.*
.*/node_modules/xdl/.*
.*/node_modules/react-native-gesture-handler/.*
[include]
[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow-github
node_modules/react-native/flow
[options]
emoji=true
module.system=haste
munge_underscores=true
module.file_ext=.js
module.file_ext=.android.js
module.file_ext=.ios.js
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*[react_native_oss|react_native_fb][a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
[version]
^0.67.1

2
packages/material-bottom-tabs/example/.eslintrc
View File

@@ -2,7 +2,7 @@
"extends": '../.eslintrc',
"settings": {
"import/core-modules": [ "expo", "react-navigation-tabs", "react-navigation-tabs/types" ]
"import/core-modules": [ "expo", "react-navigation-material-bottom-tabs" ]
},
"rules": {

58
packages/material-bottom-tabs/example/App.js
View File

@@ -1,40 +1,56 @@
import * as React from 'react';
import Expo from 'expo';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { FlatList } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import MaterialBottomTabs from './src/MaterialBottomTabs';
import { ListSection, Divider } from 'react-native-paper';
import SimpleTabs from './src/SimpleTabs';
import ShiftingTabs from './src/ShiftingTabs';
import IconTabs from './src/IconTabs';
const data = [
{ component: ShiftingTabs, title: 'Shifting', routeName: 'ShiftingTabs' },
{ component: SimpleTabs, title: 'Simple', routeName: 'SimpleTabs' },
{ component: IconTabs, title: 'Icons only', routeName: 'IconTabs' },
];
class Home extends React.Component {
static navigationOptions = {
title: 'Examples'
title: 'Examples',
};
_renderItem = ({ item }) => (
<ListSection.Item
title={item.title}
onPress={() => this.props.navigation.navigate(item.routeName)}
/>
);
_keyExtractor = item => item.routeName;
render() {
return (
<View>
<TouchableOpacity
style={styles.item}
onPress={() => this.props.navigation.push('MaterialBottomTabs')}
>
<Text>Material bottom tabs</Text>
</TouchableOpacity>
</View>
<FlatList
ItemSeparatorComponent={Divider}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
data={data}
/>
);
}
}
const App = createStackNavigator({
Home,
MaterialBottomTabs,
...data.reduce((acc, it) => {
acc[it.routeName] = {
screen: it.component,
navigationOptions: {
title: it.title,
},
};
return acc;
}, {}),
});
const styles = {
item: {
padding: 16,
backgroundColor: '#fff',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#eee',
},
};
Expo.registerRootComponent(App);

2
packages/material-bottom-tabs/example/package.json
View File

@@ -16,7 +16,7 @@
"react-native": "~0.55.0",
"react-native-paper": "2.0.0-alpha.4",
"react-navigation": "^2.0.1",
"react-navigation-tabs": "^0.3.0"
"react-navigation-tabs": "^0.4.0"
},
"devDependencies": {
"babel-plugin-module-resolver": "^3.0.0",

60
packages/material-bottom-tabs/example/src/IconTabs.js Normal file
View File

@@ -0,0 +1,60 @@
import * as React from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import PhotoGrid from './shared/PhotoGrid';
import tabBarIcon from './shared/tabBarIcon';
class Album extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('photo-album'),
};
render() {
return <PhotoGrid id="album" />;
}
}
class Library extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('inbox'),
};
render() {
return <PhotoGrid id="library" />;
}
}
class Favorites extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('favorite'),
};
render() {
return <PhotoGrid id="favorites" />;
}
}
class Purchased extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('shop'),
};
render() {
return <PhotoGrid id="purchased" />;
}
}
export default createMaterialBottomTabNavigator(
{
Album,
Library,
Favorites,
Purchased,
},
{
shifting: false,
labeled: false,
activeTintColor: '#f0edf6',
inactiveTintColor: '#3e2465',
barStyle: { backgroundColor: '#694fad' },
}
);

86
packages/material-bottom-tabs/example/src/MaterialBottomTabs.js
View File

@@ -1,86 +0,0 @@
import * as React from 'react';
import { View, Text } from 'react-native';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { MaterialIcons } from '@expo/vector-icons';
const tabBarIcon = name => ({ tintColor }) => (
<MaterialIcons
style={{ backgroundColor: 'transparent' }}
name={name}
color={tintColor}
size={24}
/>
);
class Album extends React.Component {
static navigationOptions = {
tabBarColor: '#3F51B5',
tabBarIcon: tabBarIcon('photo-album'),
};
render() {
return (
<View>
<Text>Album</Text>
</View>
);
}
}
class Library extends React.Component {
static navigationOptions = {
tabBarColor: '#009688',
tabBarIcon: tabBarIcon('photo-library'),
};
render() {
return (
<View>
<Text>Library</Text>
</View>
);
}
}
class History extends React.Component {
static navigationOptions = {
tabBarColor: '#795548',
tabBarIcon: tabBarIcon('history'),
};
render() {
return (
<View>
<Text>History</Text>
</View>
);
}
}
class Cart extends React.Component {
static navigationOptions = {
tabBarColor: '#607D8B',
tabBarIcon: tabBarIcon('shopping-cart'),
};
render() {
return (
<View>
<Text>Cart</Text>
</View>
);
}
}
export default createMaterialBottomTabNavigator(
{
Album,
Library,
History,
Cart,
},
{
shifting: true,
activeTintColor: '#fff',
}
);

60
packages/material-bottom-tabs/example/src/ShiftingTabs.js Normal file
View File

@@ -0,0 +1,60 @@
import * as React from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import PhotoGrid from './shared/PhotoGrid';
import tabBarIcon from './shared/tabBarIcon';
class Album extends React.Component {
static navigationOptions = {
tabBarColor: '#6200ee',
tabBarIcon: tabBarIcon('photo-album'),
};
render() {
return <PhotoGrid id="album" />;
}
}
class Library extends React.Component {
static navigationOptions = {
tabBarColor: '#2962ff',
tabBarIcon: tabBarIcon('inbox'),
};
render() {
return <PhotoGrid id="library" />;
}
}
class Favorites extends React.Component {
static navigationOptions = {
tabBarColor: '#00796b',
tabBarIcon: tabBarIcon('favorite'),
};
render() {
return <PhotoGrid id="favorites" />;
}
}
class Purchased extends React.Component {
static navigationOptions = {
tabBarColor: '#c51162',
tabBarIcon: tabBarIcon('shop'),
};
render() {
return <PhotoGrid id="purchased" />;
}
}
export default createMaterialBottomTabNavigator(
{
Album,
Library,
Favorites,
Purchased,
},
{
shifting: true,
}
);

65
packages/material-bottom-tabs/example/src/SimpleTabs.js Normal file
View File

@@ -0,0 +1,65 @@
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import PhotoGrid from './shared/PhotoGrid';
import tabBarIcon from './shared/tabBarIcon';
class Album extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('photo-album'),
};
render() {
return <PhotoGrid id="album" />;
}
}
class Library extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('inbox'),
};
render() {
return <PhotoGrid id="library" />;
}
}
class Favorites extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('favorite'),
};
render() {
return <PhotoGrid id="favorites" />;
}
}
class Purchased extends React.Component {
static navigationOptions = {
tabBarIcon: tabBarIcon('shop'),
};
render() {
return <PhotoGrid id="purchased" />;
}
}
export default createMaterialBottomTabNavigator(
{
Album,
Library,
Favorites,
Purchased,
},
{
shifting: false,
activeTintColor: '#6200ee',
inactiveTintColor: '#828792',
barStyle: {
backgroundColor: '#f8f7f9',
borderTopWidth: StyleSheet.hairlineWidth,
borderStyle: 'solid',
borderColor: '#d0cfd0',
},
}
);

35
packages/material-bottom-tabs/example/src/shared/PhotoGrid.js Normal file
View File

@@ -0,0 +1,35 @@
import * as React from 'react';
import { View, Image, ScrollView, Dimensions, StyleSheet } from 'react-native';
export default function PhotoGrid({ id }) {
const PHOTOS = Array.from({ length: 24 }).map(
(_, i) => `https://unsplash.it/300/300/?random&__id=${id}${i}`
);
return (
<ScrollView contentContainerStyle={styles.content}>
{PHOTOS.map(uri => (
<View key={uri} style={styles.item}>
<Image source={{ uri }} style={styles.photo} />
</View>
))}
</ScrollView>
);
}
const styles = StyleSheet.create({
content: {
flexDirection: 'row',
flexWrap: 'wrap',
padding: 4,
},
item: {
height: Dimensions.get('window').width / 2,
width: '50%',
padding: 4,
},
photo: {
flex: 1,
resizeMode: 'cover',
},
});

13
packages/material-bottom-tabs/example/src/shared/tabBarIcon.js Normal file
View File

@@ -0,0 +1,13 @@
import * as React from 'react';
import { MaterialIcons } from '@expo/vector-icons';
const tabBarIcon = name => ({ tintColor }) => (
<MaterialIcons
style={{ backgroundColor: 'transparent' }}
name={name}
color={tintColor}
size={24}
/>
);
export default tabBarIcon;

16
packages/material-bottom-tabs/example/yarn.lock
View File

@@ -4606,7 +4606,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
prop-types@15.5.8, prop-types@15.6.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0:
prop-types@15.5.8, prop-types@15.6.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
@@ -4856,7 +4856,7 @@ react-native-svg@6.2.2:
lodash "^4.16.6"
pegjs "^0.10.0"
react-native-tab-view@0.0.78, react-native-tab-view@^0.0.77, react-native-tab-view@~0.0.78:
react-native-tab-view@0.0.78, react-native-tab-view@^0.0.77, react-native-tab-view@^1.0.0, react-native-tab-view@~0.0.78:
version "0.0.78"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.78.tgz#9b90730d89cbd34a03f0e0ab10e74ca7af945560"
dependencies:
@@ -4946,7 +4946,7 @@ react-navigation-deprecated-tab-navigator@1.3.0:
dependencies:
react-native-tab-view "^0.0.77"
react-navigation-tabs@0.3.0, react-navigation-tabs@^0.3.0:
react-navigation-tabs@0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.3.0.tgz#b1fe7ef1c665dd8928fafcc8622616e220ae5efa"
dependencies:
@@ -4956,6 +4956,16 @@ react-navigation-tabs@0.3.0, react-navigation-tabs@^0.3.0:
react-native-safe-area-view "^0.7.0"
react-native-tab-view "~0.0.78"
react-navigation-tabs@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.4.0.tgz#c14c7a3e99f4ab228705efa705af7a8d393102ce"
dependencies:
hoist-non-react-statics "^2.5.0"
prop-types "^15.6.1"
react-lifecycles-compat "^3.0.4"
react-native-safe-area-view "^0.7.0"
react-native-tab-view "^1.0.0"
react-navigation@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.0.4.tgz#efc09de09799c2117a54002a6ea0e9b80e92828d"

20
packages/material-bottom-tabs/package.json
View File

@@ -10,8 +10,9 @@
"test": "jest",
"flow": "flow",
"lint": "eslint .",
"precommit": "yarn lint && yarn flow && yarn test",
"build": "babel --no-babelrc --plugins=syntax-jsx,syntax-class-properties,syntax-object-rest-spread,transform-flow-strip-types,react-native-paper/babel src --out-dir dist --ignore '**/__tests__/**'",
"prepublish": "yarn build"
"prepare": "yarn build"
},
"keywords": [
"react-native-component",
@@ -35,8 +36,8 @@
"dependencies": {
"hoist-non-react-statics": "^2.5.0",
"prop-types": "^15.6.0",
"react-native-paper": "2.0.0-alpha.1",
"react-navigation-tabs": "^0.3.0"
"react-native-paper": "2.0.0-alpha.4",
"react-navigation-tabs": "^0.4.0"
},
"devDependencies": {
"@expo/vector-icons": "^6.2.0",
@@ -53,14 +54,15 @@
"eslint": "^4.12.1",
"eslint-config-satya164": "^1.0.1",
"eslint-plugin-react-native-globals": "^0.1.0",
"flow-bin": "~0.56.0",
"flow-bin": "~0.67.0",
"husky": "^0.14.3",
"jest": "^21.2.1",
"prettier": "^1.8.2",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-native": "~0.50.4",
"react-navigation": "^2.0.1",
"react-test-renderer": "16.0.0"
"react": "16.3.1",
"react-dom": "16.3.1",
"react-native": "~0.55.4",
"react-navigation": "^2.1.0",
"react-test-renderer": "16.2.0"
},
"peerDependencies": {
"react": "*",

4
packages/material-bottom-tabs/src/index.js
View File

@@ -1,3 +1,5 @@
/* @flow */
export { default as createMaterialBottomTabNavigator } from './navigators/createMaterialBottomTabNavigator';
export {
default as createMaterialBottomTabNavigator,
} from './navigators/createMaterialBottomTabNavigator';

10
packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.js
View File

@@ -19,8 +19,14 @@ class BottomNavigationView extends React.Component<Props> {
};
render() {
// eslint-disable-next-line no-unused-vars
const { activeTintColor, inactiveTintColor, navigation, descriptors, ...rest } = this.props;
const {
activeTintColor,
inactiveTintColor,
navigation,
// eslint-disable-next-line no-unused-vars
descriptors,
...rest
} = this.props;
return (
<BottomNavigation

1277
packages/material-bottom-tabs/yarn.lock
View File

File diff suppressed because it is too large Load Diff