React Native 水平和垂直滚动

Question

我有一个标题组件和 3 个选项卡，选项卡内的内容是动态的，我想在选项卡之间水平滚动，如果选项卡内容较大，它应该与标题一起滚动。

我已经尝试过了

import React from 'react';
import { ScrollView, View, Text, Dimensions, SafeAreaView } from 'react-native';

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

const ScrollViewContainer = () => {
  return (
    
<SafeAreaView>
<ScrollView >
    <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 20 }}>Username</Text>
        <Text>Description</Text>
      </View>


    <ScrollView
      horizontal={true}
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      
    >

         <View style={{ width }}>
        <ScrollView >
          <Text style={{ fontSize: 30 }}>Large content for Page 1</Text>
          {/* More content */}
        </ScrollView>
      </View>
      <View style={{ width }}>
        <ScrollView >
          <Text style={{ fontSize: 30 }}>Large content for Page 2</Text>
              <Text style={{ fontSize: 30 }}>to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.
        to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.
        to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.
        to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.
        to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.

         to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.
          to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.
        </Text>
        </ScrollView>
      </View>
      <View style={{ width }}>
        <ScrollView nestedScrollEnabled>
          <Text style={{ fontSize: 30 }}>Large content for Page 23</Text>
          {/* More content */}
        </ScrollView>
      </View>

    </ScrollView>
    </ScrollView>
    </SafeAreaView>
  );
};

export default ScrollViewContainer;

但这不允许内部滚动视图滚动

我无法预先定义高度，但我可以通过乘以每张卡片的高度来计算它

将此视为类似于 Instagram 个人资料页面

Answer 1

我认为你需要顶部选项卡导航器

https://reactnavigation.org/docs/material-top-tab-navigator/