react-navigation-stack/example/App.js

74 lines
2.0 KiB
JavaScript
Raw Normal View History

2018-08-03 21:59:12 +00:00
import React from 'react';
import Expo from 'expo';
2018-09-26 17:59:44 +00:00
import { FlatList, I18nManager } from 'react-native';
2018-08-03 21:59:12 +00:00
import { createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { ListSection, Divider } from 'react-native-paper';
2018-09-14 10:48:59 +00:00
2018-08-03 21:59:12 +00:00
import SimpleStack from './src/SimpleStack';
import TransparentStack from './src/TransparentStack';
2018-09-24 23:51:55 +00:00
import ModalStack from './src/ModalStack';
import GestureInteraction from './src/GestureInteraction';
2018-08-03 21:59:12 +00:00
2018-09-26 17:59:44 +00:00
// Uncomment the following line to force RTL. Requires closing and re-opening
// your app after you first load it with this option enabled.
// I18nManager.forceRTL(false);
2018-09-14 10:48:59 +00:00
// Comment the following two lines to stop using react-native-screens
2018-09-26 17:59:44 +00:00
// import { useScreens } from 'react-native-screens';
// useScreens();
2018-09-14 10:48:59 +00:00
2018-08-03 21:59:12 +00:00
const data = [
{ component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
2018-09-24 23:51:55 +00:00
{ component: ModalStack, title: 'Modal', routeName: 'ModalStack' },
{
component: TransparentStack,
title: 'Transparent',
routeName: 'TransparentStack',
},
{ component: GestureInteraction, title: 'Gesture Interaction', routeName: 'GestureInteraction' },
2018-08-03 21:59:12 +00:00
];
class Home extends React.Component {
static navigationOptions = {
title: 'Examples',
};
_renderItem = ({ item }) => (
<ListSection.Item
title={item.title}
onPress={() => this.props.navigation.navigate(item.routeName)}
/>
);
_keyExtractor = item => item.routeName;
render() {
return (
<FlatList
ItemSeparatorComponent={Divider}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
data={data}
2018-09-24 23:51:55 +00:00
style={{ backgroundColor: '#fff' }}
2018-08-03 21:59:12 +00:00
/>
);
}
}
const App = createSwitchNavigator({
Home: createStackNavigator({ Home }),
...data.reduce((acc, it) => {
acc[it.routeName] = {
screen: it.component,
navigationOptions: {
title: it.title,
},
};
return acc;
}, {}),
});
Expo.registerRootComponent(App);