Wie man mit Klick auf GridView reagieren native Android?

Question

Ich habe implementiert grid view in reagieren native.It erhält Daten von JSON und zeigt an. Nun möchte ich auf die grid item klicken und den Inhalt auf der Grundlage von Daten zur aktuellen Position von grid anzeigen.

Implemented grid view using

Answer 1

Sie können mit onPress Handler einem der Touchable-Komponenten verwenden. Für die Ex-TouchableHighlight: können Sie die den Navigator als Requisiten passieren, wie in renderScene Abschnitt des Beispiels unter

index.ios.js

import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    Navigator 
} from 'react-native'; 
import GridView from 'react-native-grid-view'; 
import Movie from './Movie.js'; 
import MovieDetail from './MovieDetail.js'; 

class ReactNativeGridViewTest extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     movies: ['hello', 'blabla', 'BatMan', 'SuperMan'] 
    }; 
    } 
    onHandleItemPress(item){ 
    this.refs.navigator.push(
     {id: 'detail', 
     data:item}); 
    } 
    renderItem(item) { 
    return (<TouchableHighlight onPress= {this.onHandleItemPress.bind(this, item)}> 
      <View> 
      <Movie item={item}/> 
      </View> 
      </TouchableHighlight>); 
    } 
    renderScene(route,navigator){ 
    switch(route.id){ 
     case 'master': return (
     <View style={styles.container}> 
     <GridView 
     items={this.state.movies} 
     itemsPerRow={3} 
     renderItem={this.renderItem.bind(this)} 
     /> 
     </View>) 
     case 'detail': return (<MovieDetail navigator={navigator} data={route.data}/>) 
    } 
    } 
    render() { 
    return (
     <Navigator ref="navigator" 
     initialRoute={{id: 'master'}}renderScene={this.renderScene.bind(this)}/> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('ReactNativeGridViewTest',() => ReactNativeGridViewTest); 

Movie.js

import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
} from 'react-native'; 

export default class Movie extends Component{ 
    render(){ 
     return (<View style={{width:40, height:40, margin: 20, backgroundColor:'red'}}> 
      <Text>{this.props.item}</Text> 
      </View>) 
    } 
} 

gezeigt

MovieDetail

import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
} from 'react-native'; 

export default class MovieDetail extends Component{ 
    render() { 
     return (<View style={styles.container}> 
     <TouchableHighlight onPress={()=> this.props.navigator.pop()}> 
      <Text>Go Back </Text> 
     </TouchableHighlight> 
     <View style={{width:40, height:40, margin: 20, backgroundColor:'red'}}> 
      <Text>{this.props.data}</Text> 
      </View> 
      </View>); 
     } 
    } 


const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

Sie können auch das Arbeits Beispiel Besuche bei https://github.com/agenthunt/react-native-scratchpad/tree/master/ReactNativeGridViewTest