如何有条件地禁用ListView组件中的行,就好像它是按钮一样?

时间:2019-02-05 23:10:14

标签: javascript react-native

我正在浏览我们的移动应用程序(React Native 0.41.2),并根据其所在组件的状态将按钮设置为有条件地禁用。这是一个简单的任务,具有真实的<Button />组件,因为该组件采用属性disabled,并且根据传递给它的布尔值,该按钮是否被禁用。禁用按钮的目的是防止用户多次按下按钮,这可能会引起问题。因此,我已经能够轻松控制<Button />组件,但是现在我遇到了一个类似的策略来禁用<ListView />组件的行的问题。据我所知,没有disabled之类的道具可以告诉该行禁止被按下。我已经阅读了很多有关如何删除行的文章,但是我只需要禁用该行,因为按一下该行将不会产生任何结果。

我正在将项目列表呈现为dataSource。每行都是一个Project组件,按下该行会将用户带到Project屏幕。我尝试将Project组件包装在<TouchableOpacity/>组件中,因为我知道该组件采用了disabled道具。 I found this approach here

<ListView
    dataSource={this.state.dataSource}
    enableEmptySections={true}
    renderRow={(project) =>
      <TouchableOpacity disabled={true}> 
        <Project 
         project={project} 
         isLoggingIn={this.state.isLoggingIn}
         navigation={this.props.navigation} 
        />
      </TouchableOpacity>
     }
 />

我希望上面的代码将呈现一个<Project />行,但是该行未被禁用。即使将true的硬编码值传递给disabled道具之后,我仍然可以按它并将其带到“项目”屏幕。请指教。

0 个答案:

没有答案