按条件反应本机导航

Question

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

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

我该怎么做？

我的函数是 navigateByCondition

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

代码 React Native 波纹管：

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)}>

按条件反应本机导航

React Native Navigation By Condition

function

react-native

react-navigation

react-navigation-stack

react-navigation-v5