1+ /**
2+ * Sample React Native App
3+ * https://github.com/facebook/react-native
4+ *
5+ * @format
6+ * @flow
7+ */
8+
9+ import React from 'react' ;
10+ import {
11+ SafeAreaView ,
12+ StyleSheet ,
13+ ScrollView ,
14+ View ,
15+ Text ,
16+ StatusBar ,
17+ } from 'react-native' ;
18+
19+ import {
20+ Header ,
21+ LearnMoreLinks ,
22+ Colors ,
23+ DebugInstructions ,
24+ ReloadInstructions ,
25+ } from 'react-native/Libraries/NewAppScreen' ;
26+ import Ionicons from 'react-native-vector-icons/Ionicons' ;
27+ import { createAppContainer } from 'react-navigation' ;
28+ import { createBottomTabNavigator } from 'react-navigation-tabs' ;
29+
30+ import CameraScreen from './screens/CameraScreen' ;
31+ import LocationScreen from './screens/LocationScreen' ;
32+ import BluetoothScreen from './screens/BluetoothScreen' ;
33+
34+ // const App: () => React$Node = () => {
35+ // return (
36+ // <>
37+ // <StatusBar barStyle="dark-content" />
38+ // <SafeAreaView>
39+ // <ScrollView
40+ // contentInsetAdjustmentBehavior="automatic"
41+ // style={styles.scrollView}>
42+ // <Header />
43+
44+ // <View style={styles.body}>
45+ // <View style={styles.sectionContainer}>
46+ // <Text style={styles.sectionTitle}>Step One</Text>
47+ // <Text style={styles.sectionDescription}>
48+ // Edit <Text style={styles.highlight}>App.js</Text> to change this
49+ // screen and then come back to see your edits.
50+ // </Text>
51+ // </View>
52+
53+ // </View>
54+ // </ScrollView>
55+ // </SafeAreaView>
56+ // </>
57+ // );
58+ // };
59+
60+
61+
62+
63+
64+
65+
66+ const TabNavigator = createBottomTabNavigator (
67+ {
68+ Camera : { screen : CameraScreen } ,
69+ Location : { screen : LocationScreen } ,
70+ Bluetooth : { screen : BluetoothScreen } ,
71+ } ,
72+ {
73+ defaultNavigationOptions : ( { navigation } ) => ( {
74+ tabBarIcon : ( { focused, tintColor } ) => {
75+ const { routeName } = navigation . state ;
76+ let iconName ;
77+ if ( routeName === 'Camera' ) {
78+ iconName = `ios-information-circle${ focused ? '' : '-outline' } ;
79+ } else if ( routeName === 'Location' ) {
80+ iconName = `ios-options${ focused ? '' : '-outline' } ;
81+ } else if ( routeName === 'Bluetooth' ) {
82+ iconName = `ios-options${ focused ? '' : '-outline' } ;
83+ }
84+
85+ // You can return any component that you like here! We usually use an
86+ // icon component from react-native-vector-icons
87+ return < Ionicons name = { iconName } size = { 25 } color = { tintColor } /> ;
88+ } ,
89+ } ) ,
90+ tabBarOptions : {
91+ activeTintColor : 'tomato' ,
92+ inactiveTintColor : 'gray' ,
93+ } ,
94+ }
95+ ) ;
96+
97+
98+
99+
100+
101+ const styles = StyleSheet . create ( {
102+ scrollView : {
103+ backgroundColor : Colors . lighter ,
104+ } ,
105+ engine : {
106+ position : 'absolute' ,
107+ right : 0 ,
108+ } ,
109+ body : {
110+ backgroundColor : Colors . white ,
111+ } ,
112+ sectionContainer : {
113+ marginTop : 32 ,
114+ paddingHorizontal : 24 ,
115+ } ,
116+ sectionTitle : {
117+ fontSize : 24 ,
118+ fontWeight : '600' ,
119+ color : Colors . black ,
120+ } ,
121+ sectionDescription : {
122+ marginTop : 8 ,
123+ fontSize : 18 ,
124+ fontWeight : '400' ,
125+ color : Colors . dark ,
126+ } ,
127+ highlight : {
128+ fontWeight : '700' ,
129+ } ,
130+ footer : {
131+ color : Colors . dark ,
132+ fontSize : 12 ,
133+ fontWeight : '600' ,
134+ padding : 4 ,
135+ paddingRight : 12 ,
136+ textAlign : 'right' ,
137+ } ,
138+ } ) ;
139+
140+ // export default App;
141+
142+ export default createAppContainer ( TabNavigator ) ;
0 commit comments