Question

目标：从MainScreen组件导航到DeliveryScreen组件。我是＆＃34; onPress＆＃34; render func中的函数，我在其中指定ListCard组件。此func导航到Delivery.creen，如App.js文件（附在组件下方）中所列，但是当我按下卡片时没有响应... 将不胜感激任何建议。非常感谢。

＆＃13;

MainScreen- the component that navigates to DeliveryScreen:

// React
import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView, TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';

// Services
import DeliveryService from '../../services/DeliveryService';

// Vendors
import { Permissions, Location, Contacts }  from 'expo';

// Comps
import ListCard from '../ListCard/ListCard';

export class MainScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      deliveries: [],
      locationResult: null, 
      locationRoute: null
    }
  }

  componentDidMount() {
    DeliveryService.getData()
      .then(data => this.setState({
        deliveries: data
      }))
      this._getLocationAsync();
  }

  onPress = (delivery) => {
    this.props.navigation.navigate('DeliveryScreen', {
      delivery, currLocation: JSON.parse(this.state.locationResult),
      handleCompletedDeliveries: this.handleCompletedDeliveries.bind(this)
    });
  }

  handleRouteResults = (result) => {
    this.setState({
      routeResult:result
    });
  }

  handleCompletedDeliveries = (id) => {
    var completedDeliveries = this.state.deliveries.slice();
    delivs.splice(completedDeliveries.findIndex(cd => cd.id === id), 1);
    this.setState({
      deliveries:completedDeliveries
    });
}

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
        this.setState({
            locationResult: 'Access denied',
        });
    }
    let location = await Location.getCurrentPositionAsync({});
    this.setState({ 
      locationResult: JSON.stringify(location) 
    });
  }

  render() {

    var icon = require('../../assets/img/location.png')
    var ham = require('../../assets/img/ham.png');
    var { deliveries } = this.state

    return (
      <ScrollView style={styles.container}>
        <View>
          <View style={styles.nav}>
            <Image style={styles.ham} source={ham} />
            <Text style={styles.navTxt}>Future orders</Text>
            <Image style={styles.img} source={icon} />
          </View>
        </View>
        <View style={styles.contentContainer}>
          {deliveries.map(delivery => {
            return (
              <ListCard key={delivery.id} data={delivery}
                onPress={(delivery) => {this.onPress(delivery)}}
              />
            )
          })}
          {/* Button should go here */}
        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({

  nav: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'rgb(66, 97, 144)',
    height: 60,
    paddingHorizontal: 8,
    paddingVertical: 7.3,
  },

  img: {
    width: 24,
    height: 24
  },

  ham: {
    width: 40,
    height: 40
  },
  navTxt: {
    width: 100,
    height: 26,
    color: 'white',
    fontSize: 13.3
  },

  container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  card: {
    width: 227.3,
    height: 100.6
  },
  container: {
    flex: 1,
    alignSelf: 'stretch',
  },
  contentContainer: {
    paddingTop: 26,
    paddingLeft: 16,
    paddingRight: 16
  }
});

export default MainScreen;

App.js- where the navigations are specified: 

// React
import React from 'react';
import { StackNavigator } from 'react-navigation';

// Comps 
import HomeScreen from './comps/HomeScreen/HomeScreen';
import DeliveryScreen from './comps/DeliveryScreen/DeliveryScreen';

const RootNavigator = StackNavigator({
    HomeScreen: {
        screen: HomeScreen
    },

    DeliveryScreen: {
        screen: DeliveryScreen
    }

},
    { headerMode: 'none' }
)

export default RootNavigator

＆＃13;

Answer 1

this.handleCompletedDeliveries.bind(this)中有[{1}}，但您的onPress中未定义handleCompletedDeliveries个功能。

您似乎需要绑定MainScreen函数。您应该检查打包程序，它必须在您的模拟器/设备可能没有显示任何错误时向该上下文抛出错误。

修改

此外，你可以

（a）在handleCompleted函数中重新检查delivs.splice。 handleCompletedDeliveries未在任何地方定义。请仔细检查其余的代码，以便进行如此小的忽视。

（b）尝试调试delivs（如@BenKane建议的那样）以查看是否正在调用它。

（c）如果正确调用它，请尝试调试您在onPress中传递的每个参数。

（d）另外，请检查包装商。通常情况下，打包器会在后台丢失错误，而模拟器/模拟器/设备则不会。打包器中的错误更加具体。

React Native导航问题：无法在卡片按下时导航到下一个屏幕

1 个答案: