Блог

Я пытаюсь получить подтверждение концепции, работая со списком элементов. Список отображается нормально, но когда я пытаюсь прокрутить список до конца, я не могу дойти до конца. Есть ли решение для этого? Я установил для 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,
    },
});
  

Я понятия не имею, почему вы вкладываете ListView в ScrollView, потому что будет работать только 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>

должно работать правильно, но не проверял, потому что писал с пальца 😉