Reactフラットリスト内の子コンポーネントのネイティブナビゲーション

Question

Im React Native（およびJavscript）でかなり新しいですし、反応するネイティブナビゲーションを理解しようとしています。

私はhomeScreenを持っています。この画面には、いくつかのCardComponentsを持つCardFlatListがあります。 CardComponentをクリックすると、Detail Pageが開き、cardComponentの情報が表示されます。

まず、homeScreenのボタンでナビゲーションを試してみました。しかし、私はホームスクリーンからナビゲータを渡す方法を知りません - > CardFlatList - > CardComponent（onPress）。

マイCardComponent

export default class CardComponent extends Component { 
constructor(props) { 
    super(props) 
} 

render() { 
    return (
     <View style={styles.container}> 
      <Card 
       featuredTitle={this.props.eventname} 
       featuredSubtitle={this.props.eventveranstalter} 
       image={{uri: this.props.eventimage}} 
      > 
       <View style={styles.chipContainer}> 
        <ChipsComponent text={this.props.eventtag1} style={{ marginBottom: 10 }} /> 
        <ChipsComponent text={this.props.eventtag2} style={{ marginBottom: 10 }} /> 
        <ChipsComponent text={this.props.eventtag3} style={{ marginBottom: 10 }} /> 
       </View> 
       <View style={styles.cardaction}> 
        <Text style={styles.cardfooter}> 
         {this.props.eventuhr} 
        </Text> 
        <Text style={styles.cardfooter}> 
          {this.props.eventort} 
        </Text> 
        <Button 
         backgroundColor='#5ac8fa' 
         fontFamily='Arial' 
         fontWeight='bold' 
         buttonStyle={styles.buttonfooter} 
         title='Teilnehmen' /> 
       </View> 
      </Card> 
     </View> 
    ) 
} 

マイホームスクリーンの

export default class homeScreen extends Component { 
    static navigationOptions = { 
    drawerLabel: 'Home', 
    headerMode: 'none', 

    }; 

    constructor(props) { 
    super(props) 
    } 


    render() { 
    var {navigate} = this.props.navigation; 
    return (

     <View style={styles.containerAll}> 
     <Navigationbar onPressBar={()=>this.props.navigation.navigate('DrawerOpen')} /> 


     <View style={styles.container}> 
      <CardFlatList navigation={this.props.navigation} /> 
     </View> 

     </View> 
    ); 
    } 

} 

私router.js

export const DrawNavigation = DrawerNavigator({ 
    Home: { 
    screen: homeScreen 
    }, 
    Notifications: { 
    screen: test, 
    }, 
}); 



export const Root = StackNavigator({ 

    DrawNavigation: { 
    screen: DrawNavigation, 
    navigationOptions: { 
     header: false, 

    }, 

    }, 
    First: { screen: homeScreen }, 
    Second: { screen: eventDetailScreen }, 





}); 

import React, { Component } from "react"; 
import { View, Text, FlatList, ActivityIndicator,Image } from "react-native"; 
import { List, ListItem, SearchBar } from "react-native-elements"; 
import CardComponent from './CardComponent'; 

function getCardComponentArray() { 
    var texts = ['1', '2', '3', '4', '5']; 
    var cardComponents = texts.map((text) => <CardComponent title={text} />); 
    return cardComponents; 
} 

function getData() { 
    var texts = ['1', '2', '3', '4', '5']; 
    return texts 
} 


class CardFlatList extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      loading: false, 
      data: [], 
      page: 1, 
      seed: 1, 
      error: null, 
      refreshing: false 
     }; 
    } 

    componentDidMount() { 
     this.makeRemoteRequest(); 
    } 

    makeRemoteRequest =() => { 
     this.setState({ 
      data: getData(), 
      error: null, 
      loading: false, 
      refreshing: false 
     }); 
    }; 

    handleRefresh =() => { 
     this.setState(
      { 
       page: 1, 
       seed: this.state.seed + 1, 
       refreshing: true 
      }, 
      () => { 
       this.makeRemoteRequest(); 
      } 
     ); 
    }; 

    handleLoadMore =() => { 
     this.setState(
      { 
       page: this.state.page + 1 
      }, 
      () => { 
       this.makeRemoteRequest(); 
      } 
     ); 
    }; 

    renderSeparator =() => { 
     return (
      <View 
       style={{ 
        height: 2,   
       }} 
      /> 
     ); 
    }; 

    renderHeader =() => { 
     return <SearchBar placeholder="Type Here..." lightTheme round />; 
    }; 

    renderFooter =() => { 
     if (!this.state.loading) return null; 

     return (
      <View 
       style={{ 
        paddingVertical: 20, 
        borderTopWidth: 1, 

       }} 
      > 
       <ActivityIndicator animating size="large" /> 
      </View> 
     ); 
    }; 

    render() { 
     return (
     // <List> 
       <FlatList 
        data={this.state.data} 
        renderItem={({ item }) => (


         <CardComponent 
         eventname={'Halloween'} 
         eventveranstalter={'park'} 
         eventuhr={'17:00'} 
         eventort={'berlin'} 
         eventimage={'http://whatstonightapp.com/wp-content/uploads/2016/12/background_light-1.jpg'} 
         eventtag1={'party'} 
         eventtag2={'music'} 
         eventtag3={'dance'} 
         > 

         </CardComponent> 

        )} 
        keyExtractor={item => item.email} 
        ItemSeparatorComponent={this.renderSeparator} 
      //  ListHeaderComponent={this.renderHeader} 
        ListFooterComponent={this.renderFooter} 
        onRefresh={this.handleRefresh} 
        refreshing={this.state.refreshing} 
        onEndReached={this.handleLoadMore} 
        onEndReachedThreshold={50} 
       /> 
     // </List> 
     ); 
    } 
} 

export default CardFlatList; 

Answer 1

次のようにすることができます。

render() { 
     return (
     // <List> 
       <FlatList 
        data={this.state.data} 
        renderItem={({ item }) => (


         <CardComponent 
         navigation={this.props.navigation} 
         eventname={'Halloween'} 
         eventveranstalter={'park'} 
         eventuhr={'17:00'} 
         eventort={'berlin'} 
         eventimage={'http://whatstonightapp.com/wp-content/uploads/2016/12/background_light-1.jpg'} 
         eventtag1={'party'} 
         eventtag2={'music'} 
         eventtag3={'dance'} 
         > 

         </CardComponent> 

        )}