Question

我在React Native套房中渲染两个项目的行。通常有两个，但有时行中只有一个项目，因为不是所有东西都是偶数。

  var row = new Object();
  row.left = card1;
  if (card2 != null);
  row.right = card2;
  rows[] is an array of row which is two items.

//所以我有一行两个项目，但其中一个可能是null。如果它为null，我想改为放置占位符。

// item实际上是一行两个元素。因此，item.left和item.right通常不为null，但有时如果不均匀的item.right将为null或未定义。

renderFlatListItem(item) {
  return (
    <View>
     <TouchableHighlight onPress={()=>this.onButtonPress(item.left)}>
    <View>
    <Card  <!-- Card is from react-native-elements TouchableHighlight does not accept it so I wrapped it in View-->
         title={item.left.text+''}
         image={{uri: item.left.imageUrl}}>
    </Card>
    </View>
    </TouchableHighlight>
<!--  $$$$$ I want to be able to switch this one out dynamically depending on if item.right is undefined or not -->
    <TouchableHighlight onPress={()=>this.onButtonPress(item.right)}>        
    <Card
         title={item.right == 'undefined' : 'undefined' item.right.text+''}
         image={{uri: item.right.imageUrl}}>
    </Card>
    </View>
    </TouchableHighlight>
    </View>

  );

}

所以我可能总是在布局中留下正确的TouchableHighlight，但至少我需要能够指向空白的imageURL，以防它为空。那么我如何有条件地改变imageURL呢？其次，如果row.right为null或未定义，如何将整个TouchableHighlight视图替换为其他视图？我看到了：How to check for an undefined or null variable in JavaScript? 关于检查null，但我解除引用两次。 item.right.text所以不确定我是否可以说

item.right.text || 'Not Available'

如果item.right为空，该怎么办？

另一件事是，如果我想交换另一个视图，如果item.right为null或未定义，则有条件地无法突出显示。我该怎么办？

Answer 1

对于条件渲染，请使用以下代码段：

{item.right ? <TouchableHighlight /> : null}

要显示图像，如果item.right可用，请尝试：

image={{ uri: item.right && item.right.imageUrl }}

如何在React中有条件地添加视图反应原生

1 个答案: