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

您可以做得比返回新视图更好。在您的情况下，您只想更改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 2

这可能有效。

{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 { ... }

Answer 3

“ if”条件是一条语句（没有返回值）。使用三元运算符，您将获得一个返回值。

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

Answer 4

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

如何根据条件更改视图

4 个答案: