如何根据条件更改视图

Question

我是对原生开发做出反应的新手。在我的应用程序中，我需要根据条件更改视图的颜色。所以我的问题是我可以在 react native 中的视图之间使用 if 条件吗？以下是代码

import React, {Component} from 'react';
import {StyleSheet, FlatList, Text, View, Alert,Image,TouchableOpacity} from 'react-native';

export default class Myproject extends Component {

  constructor(props)
  {
    super(props);

    this.state = { FlatListItems: [
      {key: 'One'},
      {key: 'Two'},
      {key: 'Three'},
      {key: 'Four'},
      {key: 'Five'},
      {key: 'Six'},
      {key: 'Seven'},
      {key: 'Eight'},
      {key: 'Nine'},
      {key: 'Ten'},
      {key: 'Eleven'},
      {key: 'Twelve'}
    ]}
  }

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          marginLeft: 12,
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

  GetItem (item) {

  Alert.alert(item);

  }


  render() {
    return (

 <View style={styles.MainContainer}>

      <FlatList

          data={this.state.FlatListItems}

          ItemSeparatorComponent = {this.FlatListItemSeparator}

          renderItem={
            ({item}) => 
             <View style={styles.mainItem}> 
                <View style={styles.itemContainer}>

                   <View>
                     <Image source={require('./resource/ic_drawer.png')}  />
                     <Text style={styles.item} onPress={this.GetItem.bind(this, item.key)}>{item.key}</Text> 
                   </View>

                   <View style={styles.balanceItem}>
                     <View>
                       <Text >Balance</Text>
                       <Text style={{color: '#000',fontSize: 18}}>$89.04</Text>
                     </View>

                     <View style={styles.subItem}>
                       <View>
                         <Text >Account number</Text>
                         <Text style={{color: '#000',fontSize: 14}}>743509-001</Text>
                       </View>
                       <View style={styles.balanceItem}>
                         <Text >Meter number</Text>
                         <Text style={{color: '#000',fontSize: 14}}>17976849</Text>
                       </View>
                     </View>
                    </View>

                    <View style={styles.balanceItem}>
                      <View style={styles.duenbuttonItem}>
                         <View>
                           <Text >Due Date</Text>
                           <Text style={{color: '#000',fontSize: 14}}>30/09/2016</Text>
                         </View>
                      </View>
                      <TouchableOpacity style={styles.btn} onPress={this.login}><Text style={{color: 'white',fontSize: 14}}>PAY NOW</Text></TouchableOpacity>
                    </View>
                    <Image source={require('./resource/arrow_24.png')} style={styles.arrowImage}/>   

                </View>   
             </View>   
          }
      />


  </View>

    );
  }

  login=()=>{
    alert("testing......");
    // this.props.navigation.navigate('Profile');
}
}

我想要像下图这样的输出

我设计的一切都很好。但问题是绿色箭头和白色箭头。我也设计了这些箭头。但是这些箭头是根据条件显示的。

我试过这样但遇到以下问题

if(item.key == "One"){
      <View style={{borderColor: 'black',borderWidth: 6,marginBottom: -6}}/>
}else{
      <View style={{borderColor: 'white',borderWidth: 6,marginBottom: -6}}/>
}

所以这里的问题是字符串比较或任何其他问题。

Answer 1

您可以做得比返回新视图更好。在您的情况下，您只想更改 bg 颜色，因此您可以在样式中使用三元条件，如下所示：

<View style={{borderColor: item.key == "One" ? "black" : "white"}}/>

更新多个条件：

defineBgColor(key){
  switch(key){
    case "One":
      return "black";
    case "Two":
      return "white";
    case "Three":
      return "orange"; 
  }
}

render(){
  <View style={{borderColor: this.defineBgColor(item.key)}}/>
}