向组件 onPress 添加导航（React-Navigation）答案

【问题标题】：Add navigation to component onPress (React-Navigation)向组件 onPress 添加导航（React-Navigation）
【发布时间】：2017-07-10 16:23:03
【问题描述】：

在我的应用程序中，我有一个 FlatList 组件，它呈现下面的组件（实际上是一行包含少量信息的 sn-ps），我想拥有它，以便我可以单击 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

【问题讨论】：

“提醒所有信息”是什么意思？我假设您想做某事然后导航？很难说出您遇到的错误是什么。
@MichaelCheng 抱歉澄清一下，我可以让它做一个 alert() 来显示该行是可点击的（现在编辑问题） - 但我不知道如何从这个屏幕导航到另一个，我已经设法将导航添加到屏幕上，就像您在 QuestionList 类中看到的那样，但不确定如何将其添加到 QuestionerAndQuestion 组件中

标签： javascript react-native react-navigation

【解决方案1】：

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

类似这样的：

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

希望对你有帮助

【讨论】：

你能写一个例子如何从他的QuestionList发送一个道具到QuestionerAndQuestion
这似乎不起作用，似乎传递了一个未定义的对象
设法让它工作。 - 组件 QuestionerAndQuestion 用于演示，而 QuestionList 是屏幕并控制导航。看我的回答

【解决方案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}>

【讨论】：