Question

我正在尝试使用一系列元素来获取概念证明。列表渲染得很好，但是当我尝试滚动到列表的底部时，我无法一直到最后。这个问题有方法解决吗？我已经将ScrollView设置为flex：1样式，并且ListView内部也将flex设置为1.当我尝试没有ScrollableTabView包时，滚动工作，所以我假设我做错了我怎么样这个页面造型风格。任何建议都会很棒！

这是我的精简代码：

import React, { Component } from 'react';
import ScrollableTabView, {ScrollableTabBar, } from 'react-native-scrollable-tab-view';

import React, { Component } from 'react';
import ScrollableTabView, {ScrollableTabBar, } from 'react-native-scrollable-tab-view';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NativeAppEventEmmiter,
  ListView,
  ScrollView,
} from 'react-native';
class whistle extends Component {
  constructor(props){
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', 'row 3', ])
    }
  }

  render() {
      return (
        <View style={styles.container}>
           <ScrollableTabView
                 style={{marginTop: 20, }}
                 initialPage={0}
                 renderTabBar={() => <ScrollableTabBar />}
           >
                <View tabLabel='List'>
                 <ScrollView style={{flex: 1}}>
                    <ListView
                      style={styles.container}
                      dataSource={this.state.dataSource}
                      renderRow={(data) => <View><Text>{data}</Text></View>}
                    />
                 </ScrollView>
              </View>
           </ScrollableTabView>
      </View>

      );
  }
}
const styles = StyleSheet.create({
  container: {
      flex: 1,
      marginTop: 20,
    },
});

Answer 1

我不知道你为什么要在ScrollView中嵌套ListView，因为只有1个PanResponder可以工作，嵌套它的唯一用例是当其中一个水平工作时。第二个垂直。

有很多无用的组件，您可以像这样尝试

<View> <ScrollableTabView style={styles.container} initialPage={0} renderTabBar={() => <ScrollableTabBar />} > <ListView tabLabel='List' style={styles.container} dataSource={this.state.dataSource} renderRow={(data) => <Text>{data}</Text>} /> </ScrollableTabView> </View>

应该正常工作，但没有检查它从手指写的cuz;）

如何让ListView与ScrollableTabView一起滚动？

1 个答案: