Question

我正在按照this教程为React中的TouchableOpacity添加一个加载微调器

当我尝试添加

时

{loading && <i className="fa fa-refresh fa-spin"></i>}

我得到的TouchableOpacity：

意外的令牌，预期为“ ...”

我尝试在加载之前添加...，但是当我按下按钮时却不显示微调框，我不知道为什么。

这是完整的代码：

class App extends Component {
state = {
    loading: false
}
    <View style={{padding: 15}}>
      <TouchableOpacity
      {loading && <i className="fa fa-refresh fa-spin"></i>}
      style={styles.button}
      disabled={loading}
      onPress={() => this.postroom(155)}  
      >
      <Text style={{color: "white" , fontSize: hp('3%')}}>Post room</Text>
      </TouchableOpacity>
    </View>

已更新：对于寻找我为什么看不到图标的人，我没有导入import“ font-awesome.min.css”

Answer 1

这里的问题是语法本身，您不能像在示例中尝试的那样将{ /* your code */ }添加到组件的标记中。

请尝试以下操作：

{loading ?
   <i className="fa fa-refresh fa-spin"></i> :
   <TouchableOpacity style={styles.button}
                     disabled={loading}
                     onPress={() => this.postroom(155)} >
         <Text style={{color: "white" , fontSize: hp('3%')}}>Post room</Text>
   </TouchableOpacity>

或者您也可以添加以下内容到文本组件中：

<TouchableOpacity style={styles.button}
                  disabled={loading}
                  onPress={() => this.postroom(155)} >
     <Text style={{color: "white" , fontSize: hp('3%')}}>
        {loading && <i className="fa fa-refresh fa-spin"></i>}
        Post room
     </Text>
</TouchableOpacity>

意外的令牌，预期的“ ...”本机反应

1 个答案: