当水平不显示任何内容时反应原生嵌套滚动视图

Question

我已经查看了大部分与我相关的问题，但没有找到解决方案，我的代码如下所示：

<View style={{flex: 1}}>
  <ScrollView style={{flexGrow: 1}}>
    <Component />
    <AnotherComponent /> 
    <View style={{flex: 1}}>
      <ScrollView 
         style={{}}
         nestedScrollEnabled 
         horizontal={true}>
         <Button />
         <Button />
         <Button /> 
      </ScrollView>
    </View>
  </ScrollView>
</View>

当我删除水平属性并向嵌套的 ScrollView 添加特定高度时，滚动将垂直工作，但是当我设置 horizontal={true} 时，按钮消失。

布局图：

Answer 1

我为设计目的创建了一个自定义按钮，看起来像这样

也检查this小吃

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  Button as BTN,
  Dimensions,
} from 'react-native';

function Button({ title, style = {} }) {
  return (
    <View style={{ ...style }}>
      <BTN title={title} />
    </View>
  );
}

export default Button;

然后在嵌套滚动中看起来像这样

import Button from './components/Button'; 
// Watch out here I have imported my custom button and not the Button from "react-native"

<View style={{ flex: 1 }}>
      <ScrollView style={{ flexGrow: 1 }}>
        <View></View>
        <View></View>
        <View style={{ flex: 1 }}>
          <ScrollView
            style={{ flexDirection: 'row' }}
            nestedScrollEnabled
            horizontal={true}>
            <Button title="TEST" style={{ width: 100, margin: 10 }} />
            <Button title="TEST" style={{ width: 100, margin: 10 }} />
            <Button title="TEST" style={{ width: 100, margin: 10 }} />
          </ScrollView>
        </View>
      </ScrollView>
    </View>