note（ノート）①この記事で得れる物
②この記事の対象者
③React Nativeとは？
④この記事の目的は？
⑤画面遷移を付けよう
→画面下部のタブによる画面遷移
→画面遷移を全て完成 ★ここに入る前までやった
→任意の画面でタブを隠す設定
⑥スマホに情報を保存しよう
⑦ホーム画面の見た目を作ろう
⑧Reduxとは
画面遷移を全部完成させる前
App.js
|
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 37 38 39 40 41 42 43 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createAppContainer, createBottomTabNavigator, createSwitchNavigator } from 'react-navigation'; import WelcomeScreen from './screens/WelcomeScreen'; import HomeScreen from './screens/HomeScreen'; import AddScreen from './screens/AddScreen'; import ProfileScreen from './screens/ProfileScreen'; export default class App extends React.Component { render() { const MainTab = createBottomTabNavigator({ homeStack: { screen: HomeScreen }, addStack: { screen: AddScreen }, profileStack: { screen: ProfileScreen } }); const NavigatorTab = createAppContainer( createSwitchNavigator({ welcome: { screen: WelcomeScreen }, main: { screen: MainTab } }) ); return ( <View style={styles.container}> <NavigatorTab /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', justifyContent: 'center', }, }); |
WelcomeScreen.js
|
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import React from 'react'; import { StyleSheet, Text, View, ScrollView, Image, Alert, Dimensions } from 'react-native'; import { Button } from 'react-native-elements'; const SCREEN_WIDTH = Dimensions.get('window').width; const SLIDE_DATA = [ { title: 'Step: 1', text: 'Add your trip memory', uri: require('../assets/welcome_screen1.jpg') }, { title: 'Step: 2', text: 'All tips on the list', uri: require('../assets/welcome_screen2.jpg') }, { title: 'Step: 3', text: 'See the trip detail!', uri: require('../assets/welcome_screen3.jpg') }, ]; class WelcomeScreen extends React.Component { onStartButtonPress = () => { this.props.navigation.navigate('main'); } renderLastButton(index) { if (index === SLIDE_DATA.length - 1) { return ( <Button style={{ padding: 10 }} buttonStyle={{ backgroundColor: 'deepskyblue' }} title="Let's get it started!" onPress={this.onStartButtonPress} /> ); } } renderSlides() { return SLIDE_DATA.map((slide, index) => { return ( <View key={index} style={styles.slideStyle} > <View style={styles.containerStyle}> <Text style={styles.textStyle}>{slide.title}</Text> <Text style={styles.textStyle}>{slide.text}</Text> </View> <Image style={{ flex: 2 }} resizeMode="contain" source={slide.uri} /> <View style={styles.containerStyle}> {this.renderLastButton(index)} <Text style={styles.textStyle}>{index + 1} / 3</Text> </View> </View> ); }); } render() { return ( <ScrollView horizontal pagingEnabled style={{ flex: 1 }} > {this.renderSlides()} </ScrollView> ); } } const styles = StyleSheet.create({ slideStyle: { flex: 1, alignItems: 'center', backgroundColor: 'skyblue', width: SCREEN_WIDTH }, containerStyle: { flex: 1, justifyContent: 'center', alignItems: 'center' }, textStyle: { color: 'white', fontSize: 20, padding: 5 } }); export default WelcomeScreen; |
この記事へのコメントはありません。