触发ListView项而不是TabBarIOS项的onPress事件

Question

我有一个react原生应用程序，在屏幕底部有一个带有TabBarIOS的可点击项目的可滚动ListView。我相信你已经明白了，但请附上截图，以防万一。

​

​

由于某种原因，当我点击TabBarIOS.Item时，它会触发下面的可点击项目，但我不确定为什么。

正在发布我的渲染函数。如果有人能告诉我哪里做错了，或者有什么建议我可以尝试一下，我将不胜感激。提前谢谢。

render() {

if (!this.state.loaded) {
  return this.renderLoadingView();
}

return (
  <View style={{ flex: 1 }}>
    <StatusBar
      hidden={true}
      barStyle="light-content"
    />
    <View style={styles.chapterListHeader}>
      <Text style={styles.chapterListTitleText}>Chapters</Text>
      <Image
        style={styles.clutchLogoImage}
        resizeMode="contain"
        source={require('../Assets/Images/clutchLogoSmall.png')}
      />
    </View>
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderChapter.bind(this)}
      renderFooter={this.renderFooter.bind(this)}
      style={styles.chapterList}
      onEndReached={() => {console.log('end reached')}}
      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
    />

    <View>
      <View>

        <TabBarIOS>
          <TabBarIOS.Item
             systemIcon="history"
             selected={this.state.selectedTab === 'tabOne'}
             onPress={() => this.setTab('tabOne')}
           ></TabBarIOS.Item>

          <TabBarIOS.Item
             systemIcon="bookmarks"
             selected={this.state.selectedTab === 'tabTwo'}
             onPress={() => this.setTab('tabTwo')}
             ></TabBarIOS.Item>

          <TabBarIOS.Item
             systemIcon="more"
             selected={this.state.selectedTab === 'tabThree'}
             onPress={() => this.setTab('tabThree')}
             ></TabBarIOS.Item>
        </TabBarIOS>
      </View>
    </View>

  </View>
);
}

Answer 1

您是否尝试过将ListView设置为父View的高度减去TabBar的高度？这将防止TabBar组件下隐藏ListView中的最后一项。