Как изменить вид в зависимости от условия

Question

Я новичок в реакции нативной разработки.В моем приложении мне нужно изменить цвет представления в зависимости от условия.Так что мой вопрос, могу ли я использовать, если условие между представлениями в реагировать родной.Ниже приведен код

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

const getBorderColor = key => {
  const searchKey = key.toLowerCase();
  const borderMap = {
    one: 'green',
    two: 'red',
    three: 'white',
  };
  return borderMap[searchKey];
};

<FlatList
  data={this.state.FlatListItems}
  renderItem={({item}) => <View style={{borderColor: this.getBorderColor(item.key)}} />}
/>

Answer 2

Условие 'if' является оператором (не имеет возвращаемого значения).Используйте троичный оператор, вы получите возвращаемое значение.

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

Answer 3

Вы можете сделать даже лучше, чем вернуть новый вид.В вашем случае вы хотите изменить только цвет 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)}}/>
}

Answer 4

Это может работать.

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

Однако, если единственное, что отличается, - это borderColour, вы можете использовать что-то вроде

<View style={item.key == "One" ? styles.blackborder : styles.whiteborder} />

с черной рамкой и белой рамкой

blackborder { ... } whiteborder { ... }