Как перейти к подробной странице с помощью Flatlist

Question

Я создаю приложение, использующее реагирующую (expo) firebase и flamelink в качестве cms, и мне нужно создать список проектов с несколькими целевыми страницами в проекте. Я использовал flatlist для визуализации своего списка проектов, но теперь мне нужно перейдите с карты проекта на страницу сведений. Что я делаю не так?

import React from 'react';
import {
    Image,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    TextInput,
    FlatList,
    Button,
    Alert,
    CameraRoll,
    TouchableHighlight,
} from 'react-native';
import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp
} from 'react-native-responsive-screen';
import * as firebase from 'firebase';
import {NavigationAction,StackNavigator, withNavigation} from 'react-navigation';


class secondScreen extends React.Component {

    static navigationOptions = {
        tabBarLabel:'Axian et les ODDD'
    }

    state = {
        item:[]
    }


    componentDidMount() {
        firebase.database().ref('databaseRefFitHere').once("value", snapshot => {
            const item = [];
            snapshot.forEach(function (childSnapshot) {
                var data = childSnapshot.val();
                item.push(data);
            });
            this.setState({
                item
            });
        });
    }


renderRow ({ item }) {

    return (
      <TouchableHighlight style={styles.container}  onPress={()=> {this.props.navigation.navigate("Details")}}>
      <View>
       <Image
            style={{width:wp('90%'), height: 150}}
                        source= {{uri:item.imgUrl}}
                    />
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.sum}>{item.summary}</Text>
        </View>
      </TouchableHighlight>
    );
}


    render(){
        return(
            <View style={{
                flex:1,
                justifyContent:'center',
                alignItems:'center',
                backgroundColor: '#C80F2D'

            }}>
            <FlatList
                data={this.state.item}
                renderItem={this.renderRow}
                keyExtractor={item => item.title}
            />
            </View>
        )
    }


}
export default withNavigation(secondScreen);

const styles = StyleSheet.create({

    container: {
        flexDirection: 'column',
        marginVertical: 20,
        marginHorizontal: wp('5%'),
        backgroundColor:'#FFF',
        width:wp('90%'),
        shadowColor: "#000",
            shadowOffset: {
                width: 0,
                height: 2,
            },
            shadowOpacity: 0.25,
            shadowRadius: 3.84,

            elevation: 5,

    },
    title:{
        fontFamily: 'circular-bold',
        fontSize: 20,
        marginHorizontal: 10,
        marginTop:10,
        color: '#000',
    },
    sum:{
        fontFamily: 'circular-mono',
        fontSize:14,
        color: '#000',
        margin:10,
    }

});

У меня классическая неопределенная не является объектом (оценивая 'this3.props.navigation') в качестве ответа.

Answer 1

сделайте функцию renderRow ({ item }) функцией стрелки, например renderRow = ({ item })=>{}, или попробуйте связать функцию

Answer 2

Сделайте так, чтобы стрелка функционировала:

renderRow = ({ item }) => {
return (
  <TouchableHighlight style={styles.container}  onPress={()=> {this.props.navigation.navigate("Details")}}>
  <View>
   <Image
        style={{width:wp('90%'), height: 150}}
                    source= {{uri:item.imgUrl}}
                />
    <Text style={styles.title}>{item.title}</Text>
    <Text style={styles.sum}>{item.summary}</Text>
    </View>
  </TouchableHighlight>
);
}

и The FlatList:

<FlatList
      data={this.state.item}
      renderItem={ ({item, index}) => this.renderRow(item)}
      keyExtractor={item => item.title}
/>

Answer 3

Вы можете написать свою функцию как функцию стрелки:

renderRow = ({item, index}) => {
    // your code goes here
}

Или вы можете связать функцию следующим образом:

this.renderRow.bind(this);