Question

如果条件为是或否，如何导航到另一个屏幕？

我尝试了if和with三元运算符，但似乎我的函数没有看到待处理和已交付的数据

我该怎么做？

我的功能是navigationByCondition

当我单击按钮时，将根据待处理或已交付的条件导航到另一个屏幕

代码React Native Bellow：

const delivered = [
  {
    id: 1,
    title: 'Lanche, MADERO',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 2,
    title: 'McDonalds',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 3,
    title: 'Bobs',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 4,
    title: 'Burguer King',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },

  {
    id: 5,
    title: 'Outback',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 6,
    title: 'Esfiha',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 7,
    title: 'Habibs',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
  {
    id: 8,
    title: 'McDonalds',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Delivered',
  },
];

const pending = [
  {
    id: 1,
    title: 'Sushi Garden',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Pending',
  },
  {
    id: 2,
    title: 'Gendai Sushi',
    description: 'Rua Joao da silva, 22, 12 horas atrás',
    status: 'Situação: Pending',
  },
];

export default class LastOrders extends Component {
  navigationByCondition = () => {
    const {navigation} = this.props;

    if (pending.status === 'Situação: Pending') {
      navigation.navigate('OrderAccept');
    } else {
      navigation.navigate('OrderDetailDelivered');
    }
  };

  renderItem = ({item}) => (
    <TouchableOpacity onPress={this.navigationByCondition}>
      <View style={styles.productContainer}>
        <Text style={styles.productTitle}>{item.title}</Text>
        <Text style={styles.productDescription}>{item.description}</Text>
        <Text
          style={
            item.status === 'Situação: Pending'
              ? styles.productStatusPending
              : styles.productStatusDelivered
          }>
          {item.status}
        </Text>
      </View>
    </TouchableOpacity>
  );

  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'Entregas Pendentes', data: pending},
            {title: 'Entregas Completas', data: delivered},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={({section}) => (
            <View>
              <Text style={styles.header}>{section.title}</Text>
            </View>
          )}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item) => item.id}
        />
      </View>
    );
  }
}

Answer 1

您必须传递该项目并在条件内对其进行比较，在这里，您将直接与该数组进行比较，这将始终导致错误

 navigationByCondition = item => {
    const {navigation} = this.props;

    if (item.status === 'Situação: Pending') {
      navigation.navigate('OrderAccept');
    } else {
      navigation.navigate('OrderDetailDelivered');
    }
  };

您应该像这样更改在线广告

 <TouchableOpacity onPress={()=>this.navigationByCondition(item)}>

根据条件反应本机导航

1 个答案: