Question

在我的应用程序中，我有一个FlatList组件，它呈现下面的组件（实际上是一个带有小片段信息的行），我想拥有它以便我可以点击FlatList中的每个组件然后带给用户到另一个提供更多细节的屏幕。

我已经设法使每个组件都可以点击，我可以让它执行一个alert（）来表明它是可点击的，但使用React-Navigation对我来说是一个棘手的补充。

FlatList页面：

/* @flow*/

import _ from 'lodash'
import {getAllQuestions} from './questionRepository'
import ProfilePicture from './components/ProfilePicture'
import QuestionerAndQuestion from './questionRow/QuestionerAndQuestion'
import Separator from './components/Separator'
import {Button, FlatList} from 'react-native'
import React, {Component} from 'react'

export default class QuestionList extends Component {
    static navigationOptions = ({navigation}) => ({
        title: 'AIBU',
        headerRight: (
            <Button
                onPress={_.debounce(() => {
                    navigation.navigate('Add')
                }, 500)}
                title="Add"
            />
        ),
        headerStyle: {
            backgroundColor: 'rgb(245, 245, 245)',
        },
        headerLeft: <ProfilePicture size={'small'} />,
    })

    state = {questions: []}

    componentDidMount() {
        this.getData()
    }

    async getData() {
        const questions = await getAllQuestions()

        this.setState({questions})
    }

    render() {
        return (
            <FlatList
                ItemSeparatorComponent={Separator}
                data={this.state.questions}
                renderItem={({item}) => <QuestionerAndQuestion item={item} />}
            />
        )
    }
}

QuestionerAndQuestion组件：

/* @flow */

import ProfilePicture from '../components/ProfilePicture'
import React from 'react'
import TextContainer from './TextContainer'
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'

const styles = StyleSheet.create({
    row: {
        backgroundColor: 'rgb(255, 255, 255)',
        height: 125,
        flex: 1,
        flexDirection: 'row',
    },
    profilePic: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    textBody: {
        flex: 6,
    },
})

const QuestionerAndQuestion = ({item}: {item: Object}) =>
    <TouchableWithoutFeedback onPress={() => navigate would go here?}>
        <View style={styles.row}>
            <View style={styles.profilePic}>
                <ProfilePicture />
            </View>
            <View style={styles.textBody}>
                <TextContainer item={item} />
            </View>
        </View>
    </TouchableWithoutFeedback>

export default QuestionerAndQuestion

Answer 1

我假设您导航到QuestionList组件，因此，您有navigation个对象。你想要做的是将navigation向下传递给QuestionerAndQuestion作为道具，然后你可以从onPress作为道具来访问它。

这样的事情：

<QuestionerAndQuestion item={item} navigation={this.props.navigation} />

希望这有帮助

Answer 2

这解决了我的问题。

QuestionList

render() {
    const navigation = this.props.navigation

    return (
        <FlatList
            ItemSeparatorComponent={Separator}
            data={this.state.questions}
            renderItem={({item}) =>
                <QuestionerAndQuestion item={item} onPress={() => navigation.navigate('Question')} />}
        />
    )
}

QuestionerAndQuestion

const QuestionerAndQuestion = ({item, onPress}: {item: Object, onPress: Object}) =>
    <TouchableWithoutFeedback onPress={onPress}>

添加导航到组件onPress（React-Navigation）

2 个答案: