相关疑难解决方法(0)

我有4个FlatLists的maxHeight设置为200内ScrollView.

<ScrollView>
  <FlatList/>
  <FlatList/>
  <FlatList/>
  <FlatList/>
</ScrollView>

当我尝试滚动a时FlatList,它不滚动而是ScrollView滚动.我该如何解决这个问题？

完整源代码

import { Component, default as React } from 'react';
import { FlatList, ScrollView, Text } from 'react-native';

export  class LabScreen extends Component<{}> {
  render() {
    return (
      <ScrollView>
        {this.renderFlatList('red')}
        {this.renderFlatList('green')}
        {this.renderFlatList('purple')}
        {this.renderFlatList('pink')}
      </ScrollView>
    );
  }

  getRandomData = () => {
    return new Array(100).fill('').map((item, index) => {
      return { title: 'Title ' + (index + 1) };
    });
  };

  renderFlatList(color: …

我正在尝试在React Native中创建类似于配置文件布局的Twitter.虽然许多应用程序使用此模式.我目前的JSX设置是这样的.

• 标题(个人资料)
• ViewPagerNav(自定义)
• ViewPager
  • 带有ListView的选项卡
  • 带有ListView的选项卡

问题是只有底部滚动.我已经看到许多React Native应用程序出现此问题.这有解决方案吗？

我的渲染视图应该如何完全获取页面滚动？

这是代码：

<ScrollView>
          { tree.myPoiComments.CommentInfo && tree.myPoiComments.CommentInfo.length>0 &&
          <FlatList
            data={tree.myPoiComments.CommentInfo}
            keyExtractor = {(item, index) => item.CommentId}
            ListHeaderComponent = {() => <View>
                      <Text style={styles.listHeader}>My Comments</Text>
                      </View>}
            renderItem= {({item}) => <CommentItem comment={item} owner={1} />}
          />
          }
          { tree.poiComments.CommentInfo && tree.poiComments.CommentInfo.length>0 &&
          <FlatList
            data={tree.poiComments.CommentInfo}
            keyExtractor = {(item, index) => item.CommentId}
            onEndReachedThreshold={1}
            onEndReached={(info) => {
            alert(JSON.stringify(info));
            } }
            extraData = {this.state}
            bounces={false}
            ListHeaderComponent = {() => <View>
                      <Text style={styles.listHeader}>People's Comments</Text>
                      </View>}
            renderItem= {({item}) => <CommentItem comment={item} owner={0} />}
          />
          }
        </ScrollView>

我已经浏览了 react native github …

介绍

我有一个 FlatList，它在页脚中呈现一个选项卡视图。此选项卡视图允许用户在一个 FlatList 或另一个 FlatList 之间切换。所以，最后这些是同级 FlatList。

问题

第一个 FlatList“A”的高度大于第二个 FlatList“B”的高度。当我选择第二个列表时，它的高度与“A”FlatList 的高度相同。

我在小吃中重现了该问题，您可以在其中看到类似的代码。我认识到代码有点长但太简单了，只需关注父 FlatList（在 App 组件中）和每个选项卡中呈现的两个 FlatList（在代码末尾）

问题

有什么想法如何解决这个问题吗？我不知道问题是否出在样式上，或者我是否必须做其他事情才能完成这项工作（所有平面列表都必须有自己的高度，而不是更大的高度）。

谢谢您，我非常感谢您的帮助。