Question

我正在使用React-native（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, index}) => {
    // your code goes here
}

或者您可以像这样绑定函数：

this.renderRow.bind(this);

Answer 3

使其具有箭头功能：

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>
);
}

和FlatList：

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

如何使用Flatlist导航到详细信息页面

3 个答案: