实施onPress on Flatlist项目

时间:2019-11-27 10:22:22

标签: react-native-android react-native-flatlist

我试图在单击并设置为另一个类时发送平面列表项目的数据。ontouch正常工作,但是图像中出现以下错误。另外,如何将api的数据发送到另一个类并从另一个类获取?我已实现如下:

enter image description here

export default class FlatSpeakers extends Component {

constructor(props) {
    super(props);
    this.state = { isLoading: true, data: [],selectedItem: null, }
   const { navigate } = this.props.navigation;
}

onPressItem = () => {
  navigate('SpeakersClick')
};

componentDidMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then(res => {
            this.setState({
                isLoading: false,
                data: res.data,
            })
        })
}

renderItem({ item }) {
    return (
        <TouchableOpacity onPress={()=>this.onPressItem(item)} >
            <Card>
                <CardSection>
                    <View style={styles.thumbnailContainerStyle}>
                        <Image
                            style={styles.thumbnailStyle}
                            source={{ uri: item.image }}
                        />
                    </View>
                    <View style={styles.headerContentStyle}>
                        <Text style={styles.headerTextStyle}>{item.title}</Text>
                        <Text>{item.artist}</Text>
                    </View>
                </CardSection>
            </Card>
        </TouchableOpacity>
    )
}

render() {
    if (this.state.isLoading) {
        return (
            <View style={{ flex: 1, padding: 20 }}>
                <ActivityIndicator />
            </View>
        )
    }

    return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem}
                    keyExtractor={(item, index) => index}
                    onPress={this.onPressItem}
                />
            </View>

    );
}
}

2 个答案:

答案 0 :(得分:0)

您的代码中的问题是,您正在从两个方面调用相同的方法-一方面,您正在其中传递参数;另一方面,您没有传递参数。如果您不想同时解决这两种情况,则应更改onPressFunction,以接受论点-在您的情况下项目

onPressItem = (item) => {
  navigate('SpeakersClick')
};

答案 1 :(得分:0)

尝试将holder.iv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { ((MainActivity) view.getContext()).getFragmentManager().beginTransaction() .replace(R.id.fragment_list_container, new DetailsFrgament()) .commit(); } }); 放在this.onPressItem = this.onPressItem.bind(this)