şimdi amaç şu: güzel güzel farklı farklı klasörlere herbir view dosyasını koymak özetle.
App.js içine;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, TextInput, StatusBar, TouchableOpacity } from 'react-native'; import { createAppContainer } from "react-navigation"; import { createStackNavigator } from "react-navigation-stack"; import { createBottomTabNavigator } from "react-navigation-tabs"; import { createDrawerNavigator} from "react-navigation-drawer"; import Route from "./src/Route"; export default class App extends React.Component{ render(){ return <Route/> } } |
sonra src diye klasör oluştur. içine screens diye klasör oluştur. Home, detail ve drawer diye klasör oluştur ve içlerine index.js dosyası oluştur.
home indexjs dosyası içine;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React from 'react'; import {SafeAreaView, ScrollView, Text, TouchableOpacity, View} from "react-native"; export default class Home extends React.Component { constructor() { super(); } render(){ return ( <SafeAreaView> <ScrollView> <View > <Text>To-Do Applssication</Text> <TouchableOpacity onPress={()=>this.props.navigation.openDrawer()}> <Text>Git</Text> </TouchableOpacity> </View> </ScrollView> </SafeAreaView> ) } } |
details indexjs içine
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React from 'react'; import {SafeAreaView, ScrollView, Text, TouchableOpacity, View} from "react-native"; export default class Detail extends React.Component { constructor() { super(); } render(){ return ( <SafeAreaView> <ScrollView> <View > <Text>To-Do Applssication</Text> <TouchableOpacity onPress={()=>this.props.navigation.navigate('Detail')}> <Text>Git</Text> </TouchableOpacity> </View> </ScrollView> </SafeAreaView> ) } } |
drawer indexjs içine
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React from 'react'; import {SafeAreaView, ScrollView, Text, View} from "react-native"; export default class Drawer extends React.Component { constructor() { super(); } render(){ return ( <SafeAreaView> <ScrollView> <View > <Text>To-Do Applssication</Text> <Text>Ali Koç</Text> <Text>Ali Koç</Text> <Text>Ali Koç</Text> <Text>Ali Koç</Text> </View> </ScrollView> </SafeAreaView> ) } } |
geldik finale. src içine Route.js oluştur ve içine;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import React from 'react'; import { createAppContainer } from "react-navigation"; import { createStackNavigator } from "react-navigation-stack"; import { createBottomTabNavigator } from "react-navigation-tabs"; import { createDrawerNavigator} from "react-navigation-drawer"; import Home from "./screens/Home"; import Detail from "./screens/Detail"; import Drawer from "./screens/Drawer"; const HomeStack = createStackNavigator({ Home:{screen:Home} }) const DetailStack = createStackNavigator({ Detail:{screen:Detail} }) const DrawerStack = createStackNavigator({ Drawer:{screen:Drawer} }) const AppBottomNavigator = createBottomTabNavigator({ Home:HomeStack, Detail:DetailStack }) const AppNavigator = createDrawerNavigator({ Home: AppBottomNavigator },{ contentComponent:Drawer }); export default createAppContainer(AppNavigator); |