Question

我是React Native（和Javscript）中的新手，我试图了解原生导航的反应。

我有一个homeScreen，在这个屏幕上有一个CardFlatList，它有几个CardComponents。如果我单击CardComponent，则应打开详细信息页面并表示cardComponent的信息。

首先，我尝试使用homeScreen中的按钮进行导航，但它确实有效。但我不知道如何从主屏幕传递导航器 - ＆gt; CardFlatList - ＆gt; 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>

                    )}

对平面列表中的子组件进行React Native导航

1 个答案: