Javascript 将导航添加到组件onPress（反应导航）

在我的应用程序中，我有一个平面列表组件，它可以呈现下面的组件（实际上是一行，包含一些小的信息片段），我希望它可以让我单击平面列表中的每个组件，然后将用户带到另一个屏幕，该屏幕提供更多详细信息

我已经设法使每个组件都可以单击，并且我可以让它执行alert（）来显示它可以单击，但是使用React导航对我来说有点棘手

平面列表页面：

/* @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} />}
            />
        )
    }
}

/*@flow*/
从“lodash”导入
从“/questionRepository”导入{getAllQuestions}
从“./components/ProfilePicture”导入ProfilePicture
从“./questionRow/QuestionAndQuestion”导入QuestionAndQuestion
从“./components/Separator”导入分隔符
从“react native”导入{按钮，平面列表}
从“React”导入React，{Component}
导出默认类QuestionList扩展组件{
静态导航选项=（{navigation}）=>({
标题:"爱步",，
头灯：(
{
navigation.navigate（'Add'）
}, 500)}
title=“添加”
/>
),
头型：{
背景颜色：“rgb（245245245245）”，
},
头左：，
})
状态={问题：[]}
componentDidMount（）{
这个文件名为getData（）
}
异步getData（）{
常量问题=等待getAllQuestions（）
this.setState（{questions}）
}
render（）{
返回(
}
/>
)
}
}

问题和问题部分：

/* @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

/*@flow*/
从“../components/ProfilePicture”导入ProfilePicture
从“React”导入React
从“./TextContainer”导入TextContainer
从“react native”导入{样式表，可触摸，无反馈，视图}
const styles=StyleSheet.create({
行：{
背景颜色：“rgb（255，255，255）”，
身高：125，
弹性：1，
flexDirection:'行'，
},
简介图片：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
flexDirection:'行'，
},
正文：{
弹性：6，
},
})
const questionAndQuestion=（{item}:{item:Object}）=>
你会去这里吗？}>
导出默认问题AndQuestion

我假设您导航到了

问题列表

组件，因此，您在那里有

导航

对象。您需要做的是将

导航

作为道具传递到

问题和问题

，然后您可以从

按

作为道具访问它

大概是这样的：

希望这有助于解决我的问题

在

问题列表中

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

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

---

“通知所有信息”是什么意思？我假设你想做点什么然后导航？很难判断您遇到的错误是什么。@MichaelCheng很抱歉要澄清，我可以让它做一个alert（）来显示行是可单击的（现在编辑的问题）-但是我不确定如何从这个屏幕导航到另一个屏幕，我已经成功地将导航添加到一个屏幕上，就像您在QuestionList类中看到的那样，但是不知道如何将其添加到问号和问号组件中，您可以编写一个示例，说明如何从他的

问号列表

向

问号和问号

发送道具。这似乎不起作用，一个未定义的对象似乎是通过管理使其起作用的。-组件QuestionAndQuestion用于演示，而QuestionList是屏幕并控制导航。看到我的答案了吗

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