Question

我试图在我的练习应用中实现导航：

onPress会导致从HomeScreen迁移到ListingReview。

我不确定说实话会出现什么问题，但我怀疑我没有正确传递道具。

请帮忙！

这是我的回购：https://github.com/rphly/practice （每个对象都在src/components中的单独.js文件中创建。）

Index.js

import React, { Component } from 'react';
import { AppRegistry, ScrollView } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Header from './src/components/Header';
import Card from './src/components/Card';
import ListingsFeed from './src/components/ListingsFeed';
import ListingReview from './ListingReview';

class HomeScreen extends Component {

    render() {

        return (
                <ScrollView> 
                    <Header />
                    <ListingsFeed />
                </ScrollView>
            );
        }
    }

export const App = StackNavigator({
    Home: { screen: HomeScreen, navigationOptions: {header: null} },
    ListingReview: { screen: ListingReview },
});

AppRegistry.registerComponent('hackathon', () => App);

ListingDetails.js（我实施onPress）

import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Card from './Card';
import CardSection from './CardSection';

 const ListingDetails = (props) => {

    return (

    <Card>
        <CardSection>
            <View style={styles.titleContainerStyle}>   
                <Text style={styles.titleContentStyle}>{props.listing.title}</Text>
            </View>
            <View style={styles.thumbnailContainerStyle}>
                <Image style={styles.thumbnailStyle} source={{uri: props.listing.primary_photo_url}}/>
            </View>

            <View style={styles.headerContentStyle}>    
                <Text style={{marginBottom: 5}} numberOfLines={15}>{props.listing.description.trim()}</Text>
                <Text style={styles.priceContentStyle}>${props.listing.price}</Text>
            </View>

            <Button
                onPress={() => navigation.navigate('ListingReview')}
                title= "Mark Listing"
                color = "#D2232A"
                />

        </CardSection>
    </Card>
    );
 };

 const styles = {
    headerContentStyle: {
        //backgroundColor: '#D2D2D2D2',
        justifyContent:'center',
        alignItems: 'center',
        marginLeft: 10
    },

    titleContainerStyle: {
        marginLeft: 10,
        marginBottom: 2,
        marginTop: 2

    },

    titleContentStyle: {
        fontSize: 15,
        fontWeight: 'bold'

    },

    thumbnailStyle: {
        height: 180,
        width: 180
    },

    thumbnailContainerStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 2,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
        marginBottom: 5

        //alignItems: 'flex-start'
    },

    priceContentStyle: {
        fontSize: 15,
        color: 'green'

    }
 };

 export default ListingDetails;

ListingFeed.js（我连接ListingDetails和Index）

的地方

import React, { Component } from 'react';
import axios from 'axios';
import { View } from 'react-native';
import ListingDetails from './ListingDetails'

class ListingsFeed extends Component {
    state = { listings:[] };

    componentWillMount() {
        axios.get('example.com/i-removed-the-url')
        .then( response => this.setState({ listings:response.data.data.products}));
        // this.setState({ listings:response.data.data.products})
    }

    renderListings() {
        return this.state.listings.map(listing =>
            <ListingDetails key={listing.id} listing={listing}/>
        );
    }

  render() {
    console.log(this.state);

    return (
      <View>
        {this.renderListings()}
      </View>
    );
  }
}

export default ListingsFeed;

Answer 1

您必须将导航道具从HomeScreen传递到您的ListingsFeed组件，例如<ListingsFeed navigation={this.props.navigation}/>。然后，将相同的道具传递给您的ListingDetails：<ListingDetails key={listing.id} listing={listing} navigation={this.props.navigation}/>

在您的ListingDetails组件中，您可以调用navigation.navigate('ListingReview')函数，但导航在组件中无处定义。您必须改为调用props.navigation.navigate('ListingReview')（来自道具）或从道具中获取导航常量：const {navigation} = props;

Answer 2

不在堆栈中的ListingDetails.js和ListingsFeed.js。

export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
ListingDetails: { screen: ListingDetails },
ListingsFeed:{screen:ListingsFeed}
});

＆＃34;错误：未定义不是对象＆＃34;添加navigation.navigate到组件？

2 个答案: