Question

我有一个react-native应用程序，屏幕底部有一个可滚动的ListView可点击项目TabBarIOS。我相信你会得到它，但附上截图以防万一。

出于某种原因，当我点击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的高度？这样可以防止ListView中的最后一项隐藏在TabBar组件下。

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

1 个答案: