0
私はネイティブに反応して、自分でそれを習うために、私は新しいです。私はナビゲーション・ドロワを実装し、いくつかの画面を作成しました。私のデモ私はlistviewを持っています、そして、私はちょうど選択された項目詳細ページにユーザをナビゲートしようとしていますが、ここでundefinedはオブジェクトではありません（評価 '_this2.props.navigation）
がindex.android.jsファイルです： -
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import Main from './src/Main'
import { DrawerNavigator } from 'react-navigation';
import { TabNavigator } from 'react-navigation';
import LoginScreen from './src/LoginScreen';
import { StackNavigator } from 'react-navigation';
import movielisting from './src/movielisting';
class reactNavigationSample extends Component {
render(){
const { navigation } = this.props;
return (
<MyComponent navigation={navigation}/>
);
}
}
const DrawerApp = DrawerNavigator({
movielisting: {screen: movielisting},
LoginScreen:{ screen: Main},
});
AppRegistry.registerComponent('reactNavigationSample',() => DrawerApp);
リストページ： -
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
import { StackNavigator } from 'react-navigation';
import { NavigationActions } from 'react-navigation';
import { Actions, ActionConst } from 'react-native-router-flux';
import home from './images/home.png';
import ActionBar from './ActionBar';
import ProgressBar from './ProgressBar';
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
import {
StyleSheet,
Text,
Image,
View,
AsyncStorage,
TouchableOpacity,TouchableHighlight,Dimensions,ListView
} from 'react-native';
const uri = 'http://csswrap.com/wp-content/uploads/2015/03/showmenu.png';
export default class movielisting extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
moviesData: ds.cloneWithRows([]),
};
}
componentDidMount() {
this.fetchMoviesData();
}
renderRow(rowData){
AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
return (
<View style={styles.thumb} >
<TouchableOpacity onPress={() => this.props.navigation.navigate('MovieDeatilScreen')}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round(rowData.vote_average * 10)/10})</Text>
</TouchableOpacity>
</View>
);
}
fetchMoviesData() {
var url = 'http://api.themoviedb.org/3/movie/now_playing?api_key=17e62b78e65bd6b35f038505c1eec409';
fetch(url)
.then(response => response.json())
.then(jsonData => {
this.setState({
moviesData: this.state.moviesData.cloneWithRows(jsonData.results),
});
})
.catch(error => console.log('Error fetching: ' + error));
}
render() {
return (
<View style={styles.container}>
<View style={styles.navBar}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerOpen')} style={styles.action} >
<Image style={styles.avatar} source={{uri}} />
</TouchableOpacity>
<Text style={styles.navBarHeader}>Movie List Screen</Text>
</View>
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow}
enableEmptySections={true}
style={styles.ListViewcontainer}
/>
<View style={styles.footer}>
<ActionBar />
</View>
</View>
);
}
renderLoader(){
return (
this.state.showLoader?<View><Spinner color='red' /></View>:null
)
}
hideLoader(){
setTimeout(() => {
this.setState({showLoader:false})
}, 1);
}
}
const styles = StyleSheet.create({
container: {
position:'relative',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
footer: {
position: 'absolute',
flex:0.1,
left: 0,
right: 0,
bottom: -12,
flexDirection:'row',
height:70,
alignItems:'center',
},
navBar: {
position: 'absolute',
flexDirection: 'row',
top:0,
right:0,
left:0,
paddingTop:15,
height: 64,
backgroundColor: '#1EAAF1'
},
navBarHeader: {
flex: 1,
left:30,
paddingTop:5,
top:2,
color: '#FFFFFF',
fontWeight: 'bold',
textAlign: 'left',
},avatar: {
left:10,
bottom:3,
width: 35,
height: 35,
},action: {
flex: 0.4,
},thumb: {
backgroundColor: '#ffffff',
marginBottom: 5,
elevation: 1
},
img: {
height: 300
},
txt: {
margin: 10,
fontSize: 16,
textAlign: 'left'
},ListViewcontainer:{
marginTop:110,
bottom: 50,
}
});
movielisting.navigationOptions = {
drawer: {
icon:() => (
<Image
source={home}
style={[styles.tabIcon, {tintColor: 'black'}]}
/>
)}
};
MovieDetail画面のページ： -
import React, { Component, PropTypes } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TextInput,
AsyncStorage,
Icon
} from 'react-native';
import ActionBar from './ActionBar';
import { StackNavigator } from 'react-navigation';
import { NavigationActions } from 'react-navigation';
import Dimensions from 'Dimensions';
import { Actions, ActionConst } from 'react-native-router-flux';
const uri = 'http://csswrap.com/wp-content/uploads/2015/03/showmenu.png';
export default class MovieDeatilScreen extends Component {
constructor(props){
super(props);
this.state = {
moviesData:''
};
}
componentDidMount() {
AsyncStorage.getItem("moviesData").then((value) => {
this.setState({"moviesData": JSON.parse(value)});
// this.Loaddata();
}).done();
}
// Loaddata() {
// for(let i = 0; i < this.state.moviesData.length; i++){
//
// this.setState({'username' : this.state.SignedUpuser[i].name});
//
// }
// }
render() {
return (
<View style={styles.container}>
<View style={styles.navBar}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerOpen')} style={styles.action} >
<Image style={styles.avatar} source={{uri}} />
</TouchableOpacity>
<Text style={styles.navBarHeader}>Movie Deatil Screen</Text>
</View>
<View style={styles.thumb}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+this.state.moviesData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{this.state.moviesData.title} (Rating: {Math.round(this.state.moviesData.vote_average * 10)/10})</Text>
</View>
<View style={styles.footer}>
<ActionBar />
</View>
</View>
);
}
}
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const styles = StyleSheet.create({
container: {
position:'relative',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
footer: {
position: 'absolute',
flex:0.1,
left: 0,
right: 0,
bottom: -12,
flexDirection:'row',
height:70,
alignItems:'center',
},
navBar: {
position: 'absolute',
flexDirection: 'row',
top:0,
right:0,
left:0,
paddingTop:15,
height: 64,
backgroundColor: '#1EAAF1'
},
navBarHeader: {
flex: 1,
left:30,
paddingTop:5,
top:2,
color: '#FFFFFF',
fontWeight: 'bold',
textAlign: 'left',
},avatar: {
left:10,
bottom:3,
width: 35,
height: 35,
},action: {
flex: 0.4,
},thumb: {
backgroundColor: '#ffffff',
marginBottom: 5,
elevation: 1
},
img: {
height: 300
},
txt: {
margin: 10,
fontSize: 16,
textAlign: 'left'
},ListViewcontainer:{
marginTop:110,
bottom: 50,
}
});
MovieDeatilScreen.navigationOptions = {
drawer: {
icon:() => (
<Image
source={home}
style={[styles.tabIcon, {tintColor: 'black'}]}
/>
)}
};
リストアイテムの詳細画面にナビゲートする方法を教えてください。この機能のためにナビゲータを個別に実装する必要がありますが、this.props.navigation.push（ティルダ名とコンポーネント名）を使用する必要がありますか？
ありがとうございます！