如何在if语句中呈现内容React Native

时间:2017-12-01 03:59:04

标签: javascript android react-native react-native-flatlist

问题

我在反应原生中使用平面列表,并希望与平板列表中的变量进行比较,如果两个变量相等则渲染文本组件,但如果不相同则不渲染。我已经尝试了很多这样做的方法,但它们没有任何效果。我希望得到一些帮助,找出一种方法来做到这一点!谢谢。

2 个答案:

答案 0 :(得分:6)

立即想起各种各样的方式。我只想假设您要比较的内容,但您可以随意切换这些变量。你要做的第一件事就是让你的文本在你的Text组件内是有条件的,EG

<Text>{this.state.variable == this.props.stuff ? "RENDER TEXT" : ""}</Text>

或者,如果要在变量不相等时发出Text组件,请在类中包含一个有条件地返回Text组件的函数

renderMessage = () => {
    if(this.state.variable == "stuff"){
        return(
            <Text>They were equal</Text>
        );
    }else{
        return(
            <View></View> // OR WHATEVER YOU WANT HERE
        );
    }
}
...
//Then in your render function
....
<View style = {styles.whatever}>
    {this.renderMessage()}
</View>

答案 1 :(得分:0)

相应地比较renderItem方法中的数据

 <FlatList
      data={this.props.data}
      renderItem={this._renderItem}
    />

    _renderItem = ({item}) => (
        if(item=='somthing'){
           return <Text> your test </Text>
         }else{
            return <Text>some other text</Text> 
         }
    );

如果您想比较组件中的文字,那么

<View>
    {
    item.data == 'somthing'
       ?
      <Text>if</Text> 
       :
      <Text>else</Text>
    }
</View>