如何使用选项卡视图滚动全屏？

问题描述

如何在我的个人资料页面中滚动标签页，标签页内是平面列表？

像 Instagram 如果您继续访问您的个人资料，则会有一个选项卡，您可以向下滚动，直到没有更多图片可用。

我使用这个库：https://github.com/satya164/react-native-tab-view

我尝试了很多次和不同的事情，但我没有成功。希望大家帮帮我

€：我可以滚动但他不显示所有结果。我不想在标签内滚动我想滚动完整的个人资料屏幕

      <ScrollView style={styles.containerProfil}>
        <View style={{flex: 1,flexDirection: 'column',alignItems: 'center',height: height * 1,width: width * 1,position: 'relative'}}>
          <TouchableOpacity style={{justifyContent: 'center',position: 'relative'}} onPress={() => navigation.navigate('Platform')}>
            <imagebackground style={styles.profilImage} resizeMode="cover" source={require('../assets/profil.jpg')} />
          </TouchableOpacity>
            <View style={{justifyContent: 'center',height: 40}}>
              <Text style={{ fontFamily: 'nunito-regular',color: '#333',fontSize: 20,letterSpacing: 0,marginVertical: 10}}>@lenamaier123</Text>
            </View>
            <View style={{flex: 1,backgroundColor: '#eee',width: width * 1}}>
              <ProfileTab /> <-- HERE ARE THE TABS
            </View>
        </View>
      </ScrollView>

Css:
  containerProfil: {
    flex: 1,backgroundColor: '#fff',position: 'relative',padding: 0,},profilImage: {
    width: 100,height: 100,borderRadius: 150 / 2,overflow: "hidden",borderWidth: 1,borderColor: '#eee',textAlign: 'center',

ProfileTab.js

import * as React from 'react';
import { View,Text,useWindowDimensions,Dimensions } from 'react-native';
import { TabView,SceneMap } from 'react-native-tab-view';
import MyProducts from '../../../screens/profile/myProducts';

const height = Dimensions.get('window').height;
const FirstRoute = () => (
  <View style={{ flex: 1,backgroundColor: '#ff4081' }}>
    <MyProducts />
  </View>
);

const SecondRoute = () => (
  <View style={{ flex: 1,backgroundColor: '#673ab7' }}>
    <Text>Second</Text>
  </View>
);

const renderScene = SceneMap({
  first: FirstRoute,second: SecondRoute,});

export default function TabViewExample() {
  const layout = useWindowDimensions();

  const [index,setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first',title: 'First' },{ key: 'second',title: 'Second' },]);

  return (
    <TabView
      navigationState={{ index,routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: Dimensions.get('window').width }}
      scrollEnable={true}
      style={{width: layout.width * 1}}
    />
  );
}

Flatlist.js

import React,{ useState } from 'react';
import { StyleSheet,View,TouchableOpacity,ScrollView,FlatList,SafeAreaView,Dimensions } from 'react-native';

const width = Dimensions.get('window').width;

const myProducts = () => {
  const [product,setProduct] = useState([
    {key: 1,text: 'Hose'},{key: 2,{key: 3,{key: 4,{key: 5,{key: 6,{key: 7,{key: 8,]);
  return (
    <View style={{width: width * 1}}>
      <FlatList
        data={product}
        scrollEnabled={true}
        keyExtractor={(item) => item.key.toString()}
        renderItem={({item}) => (<View style={{flex: 1,height: 80,padding: 20,bordderColor: '#eee'}}><Text style={{flex: 1,backgroundColor: 'red',color: 'blue'}}>{item.text}</Text></View>)}
      />
    </View>
  )
};

export default myProducts;

解决方法

ScrollView 中的 FlatList 无法按预期工作。

ScrollView 内的 FlatList 不滚动 - https://github.com/facebook/react-native/issues/19971

为了解决您的问题，我找到了 this。

,

你想要这个； https://www.npmjs.com/package/react-native-scrollable-tab-view-collapsible-header

看一看。

如果您在 tabview 中使用 FlatList 组件，请更改 <HScrollView> 与 <HFlatList>