1

如何在我的配置文件页面中滚动选项卡在哪里，而选项卡内部是平面列表？

就像 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', alignItems: '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, Text, 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, text: 'Hose'},
    {key: 3, text: 'Hose'},
    {key: 4, text: 'Hose'},
    {key: 5, text: 'Hose'},
    {key: 6, text: 'Hose'},
    {key: 7, text: 'Hose'},
    {key: 8, text: 'Hose'},
  ]);
  return (
    <View style={{width: width * 1}}>
      <FlatList
        data={product}
        scrollEnabled={true}
        keyExtractor={(item) => item.key.toString()}
        renderItem={({item}) => (<View style={{flex: 1, height: 80, width: width * 1, padding: 20, borderWidth: 1, bordderColor: '#eee'}}><Text style={{flex: 1, backgroundColor: 'red', color: 'blue'}}>{item.text}</Text></View>)}
      />
    </View>
  )
};

export default myProducts;
4

2 回答 2

0

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

看一看。

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

于 2021-07-25T18:24:02.273 回答
0

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

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

作为您的问题的解决方案，我发现了这个。

于 2021-04-26T08:48:29.997 回答