以前のリビジョンの文書です
App.js
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);
HomeScreen.js
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)}> </Button> <Button buttonStyle={styles.button} title="★★☆" onPress={(e) => this.props.navigation.push('Details',2)}> </Button> <Button buttonStyle={styles.button} title="★★★" onPress={(e) => this.props.navigation.push('Details',3)}> </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', } });
DetailsScreen.js
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')} /> <Button title="Go back" onPress={() => this.props.navigation.goBack()} /> </View> ); } }
pushするときの第二引数にセットできる
<Button buttonStyle={styles.button} title="★☆☆" onPress={(e) => this.props.navigation.push('Details',1)}> </Button>
this.props.navigation.state.paramsで取得できる
<Text>Details Screen {this.props.navigation.state.params}</Text>
this.props.navigation.push('Details',{star:1,rank:2}
のようにすることで、
{this.props.navigation.state.params.star} {this.props.navigation.state.params.rank}
のように取り出すことができる。