React Native Navigation By Condition

Question

如果条件为真或假，我如何导航到另一个屏幕？

我试过使用if和三元运算符，但似乎我的函数没有看到我的数据挂起和交付。

我如何才能做到这一点？

我的函数是navigateByCondition

当我点击按钮将导航到另一个屏幕上，根据条件待定或交付。

代码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

你必须传递项目并在条件中进行比较，这里你直接与数组进行比较，结果总是false。

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

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

你应该像这样修改onpress

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