Question

renderAvail（user，sectionId，rowId，highlightRow）{

    return(
      <ImageBackground  source={require('../../../asset/available_card_medium.png')} style={styles.containerA}>
      if(user.type == 'Wear'){
        return(
      <Image
        source={require('../../../icon.png')}
        resizeMode = 'cover' style={styles.thumbImage}>)
      }
      <View style={styles.body}>
        <Text style={styles.message1}>{user.desc}</Text>
        <Text style={styles.message1}>+{user.points} <Image source={require('../../../icon_large.png')} resizeMode ='contain' style ={{height:50,width:60}}/></Text>
      </View>
      <ImageButton
      appearance={{
        normal: require("../../../asset/btn.png"),
        highlight: require("../../../asset/btn2.png")}}
      onPress={ this.onPressButton }/>
      </ImageBackground>
  );
}

{ id：0，类型：＆＃39;调查＆＃39;， desc：＆＃39;今天让你的Apple Watch保持8小时＆＃39;，标题：＆＃39; Test1＆＃39;，日期：＆＃39; 09/06/2018＆＃39;， }， { id：1，类型：＆＃39;穿＆＃39;， desc：＆＃39;今天让你的Apple Watch保持8小时＆＃39;，标题：＆＃39; Test1＆＃39;，日期：＆＃39; 09/06/2018＆＃39;， }， { id：2，类型：＆＃39;饭＆＃39;， desc：＆＃39;今天让你的Apple Watch保持8小时＆＃39;，标题：＆＃39; Test1＆＃39;，日期：＆＃39; 09/06/2018＆＃39;， }， { id：3，类型：＆＃39;调查＆＃39;， desc：＆＃39;今天让你的Apple Watch保持8小时＆＃39;，标题：＆＃39; Test1＆＃39;，日期：＆＃39; 09/06/2018＆＃39;， }， { id：4，类型：＆＃39;穿＆＃39;， desc：＆＃39;今天让你的Apple Watch保持8小时＆＃39;，标题：＆＃39; Test1＆＃39;，日期：＆＃39; 09/06/2018＆＃39;， } ];

Answer 1

你不能直接在返回块内返回use return，因为如果条件满足，它将被返回。而不是上面的代码，你可以使用它。

return (<ImageBackground source={require('../../../asset/available_card_medium.png')} style={styles.containerA}>
    {user.type == 'Wear' && <Image
        source={require('../../../icon.png')}
        resizeMode='cover' style={styles.thumbImage}>)
      }
      <View style={styles.body}>
            <Text style={styles.message1}>{user.desc}</Text>
            <Text style={styles.message1}>+{user.points} <Image source={require('../../../icon_large.png')} resizeMode='contain' style={{ height: 50, width: 60 }} /></Text>
        </View>
        <ImageButton
            appearance={{
                normal: require("../../../asset/btn.png"),
                highlight: require("../../../asset/btn2.png")
            }}
            onPress={this.onPressButton} />

      </ImageBackground>
);

Answer 2

通过你的代码，我可以理解你是新来的反应原生。

正如@Ranvir Gorai先前回答的那样，你不能在render（）中使用if语句。请花一些时间来浏览JSX元素。

假设您正在从类的渲染中调用函数renderAvail（）。

import React from 'react';
import {
  View,
  Text,

//添加其他使用的元素。

} from 'react-native';
export default class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user:'some data',
            sectionId:'some data',
            rowId: 'some data',
            highlightRow: 'some data',
        }
    }
    // add the data to state using this.setState({key,value}); 


    renderAvail() {
        return (
            <ImageBackground source={require('../../../asset/available_card_medium.png')} style={styles.containerA}>
                {user.type == 'Wear' && <Image
                source={require('../../../icon.png')}
                resizeMode='cover' style={styles.thumbImage}>)
                }
              <View style={styles.body}>
                    <Text style={styles.message1}>{user.desc}</Text>
                    <Text style={styles.message1}>+{user.points} <Image source={require('../../../icon_large.png')} resizeMode='contain' style={{ height: 50, width: 60 }} /></Text>
                </View>
                <ImageButton
                    appearance={{
                        normal: require("../../../asset/btn.png"),
                        highlight: require("../../../asset/btn2.png")
                    }}
                    onPress={this.onPressButton} />

              </ImageBackground>
        );
    }


    render() {
        return (
            {this.renderAvail(this.state.user, this.state.sectionId, this.state.rowId, this.state.highlightRow)}
        );
    }
}

不变违规没有从渲染中退回

2 个答案: