コンポーネントをonPressに追加する（リアクションナビゲーション）

Question

私のアプリケーションでは、コンポーネントを下にレンダリングするFlatListコンポーネントがあります（情報の小さなスニペットを含む行が効果的に表示されます）。フラット・リスト内の各コンポーネントは、ユーザーをより詳細な別の画面に移動させます。

私は、各コンポーネントをクリック可能にすることができ、クリック可能であることを示すアラート（）を実行させることができますが、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

そこで私は、あなたがそこにnavigationオブジェクトを持って、あなたはQuestionListコンポーネントにナビゲートすると仮定します。あなたは何をしたいのですかnavigationを小道具QuestionerAndQuestionに渡してからonPressからアクセスできます。このような

何か：

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

ホープ、これはこれは私の問題を解決し

Answer 2

に役立ちます。 QuestionerAndQuestion

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