猫型iPS細胞研究所

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== stacknavigator ======

===== 基本 =====

スタックナビゲーターは文字通り、画面を積み重ねていくイメージの画面遷移をする。
戻るで一つ前の画面に戻ることができる。

<code>
npm install --save react-navigation
</code>

App.js
<code>
import React from 'react';
import { StyleSheet} from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation'
import HomeScreen from './HomeScreen'
import DetailsScreen from './DetailsScreen'
import EditScreen from './EditScreen'

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const styles = StyleSheet.create({
  view:{
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center',
    margin:10

  },
  button: {
      margin: 20,
      padding: 10,
      backgroundColor: 'wheat'
  }
});


const RootStack = createStackNavigator(　//使用する画面を設定。
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
    Edit: {
      screen: EditScreen,
    },
  },
  {
    initialRouteName: 'Home', //デフォルトの画面
  }
);

const AppContainer = createAppContainer(RootStack);
</code>

HomeScreen.js
<code>
import React from 'react';
import { View, Text, TouchableOpacity , StyleSheet, FlatList , AsyncStorage} from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation'; // Version can be specified in package.json
import { Button  } from 'react-native-elements';
import Icon from 'react-native-vector-icons/Ionicons';


export default class HomeScreen extends React.Component {

    constructor(props) {
    }

  
   /**
   * render
   *
   */
    render() {
  
  
      return (
        <View style={styles.view}>
          <Text>Home Screen</Text>

          <Button buttonStyle={styles.button} title="★☆☆" onPress={(e) => this.props.navigation.push('Details',1)}>　//画面遷移＋prop渡し
          </Button>

          <Button buttonStyle={styles.button} title="★★☆" onPress={(e) => this.props.navigation.push('Details',2)}>　//画面遷移＋prop渡し
          </Button>

          <Button buttonStyle={styles.button} title="★★★" onPress={(e) => this.props.navigation.push('Details',3)}>　//画面遷移＋prop渡し
          </Button>

          <Button buttonStyle={styles.button} title="問題編集" onPress={(e) => this.props.navigation.push('Edit')}>
          </Button>

            <Button buttonStyle={styles.button} title="スプレッドシートからロード" onPress={(e) => this.handleGoogleSheet(e)}>
            <Text style={styles.text}></Text>
          </Button>

        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    view:{
      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',
      margin:10,
    },
    button: {
        margin: 10,
        padding: 1,
        backgroundColor: 'rgba(0,103,171,1)',
        borderRadius: 5,
        width:300
    },
    text:{
      color: 'white'
    },
    actionButtonIcon: {
      fontSize: 20,
      height: 22,
      color: 'white',
    }
  });
</code>

DetailsScreen.js
<code>
import React from 'react';
import { Button, View, Text, TouchableOpacity , StyleSheet, FlatList , AsyncStorage} from 'react-native';

const styles = StyleSheet.create({
    view:{
      flex: 1, 
      alignItems: 'center', 
      justifyContent: 'center',
      margin:10
  
    },
    button: {
        margin: 20,
        padding: 10,
        backgroundColor: 'wheat'
    }
  });

export default class DetailsScreen extends React.Component {

    render() {
      console.log(this.props.navigation.state.params)
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Details Screen {this.props.navigation.state.params}</Text>
          <Button
            title="Go to Details... again2"
            onPress={() => this.props.navigation.push('Details')}　//更に同じ画面を積み重ねる
          />
          <Button
            title="Go to Home"
            onPress={() => this.props.navigation.navigate('Home')}　//どれだけ積み重ねていてもhomeに戻る
          />
          <Button
            title="Go back"
            onPress={() => this.props.navigation.goBack()}　//一つ前の画面に戻る
          />
        </View>
      );
    }
  }
</code>

===== StackNavigator間コンポーネント間のデータ渡し１ =====

pushするときの第二引数にセットできる
<code>
          <Button buttonStyle={styles.button} title="★☆☆" onPress={(e) => this.props.navigation.push('Details',1)}>
          </Button>
</code>

this.props.navigation.state.paramsで取得できる
<code>
<Text>Details Screen {this.props.navigation.state.params}</Text>
</code>

===== StackNavigator間コンポーネント間のデータ渡し２ =====
<code>
 this.props.navigation.push('Details',{star:1,rank:2}
</code>
のようにすることで、
<code>
{this.props.navigation.state.params.star} {this.props.navigation.state.params.rank}
</code>
のように取り出すことができる。
猫型iPS細胞研究所

ユーザ用ツール

サイト用ツール

ページ用ツール
