我有一个react-native SectionList,在视图中包含多个FlatLists.当用户触摸底部FlatList中的一个元素时,上面的一些FlatLists将加载新数据,从而导致用户的当前视图被推高.换句话说,用户的y位置保持不变,但先前在视图中的内容现在具有更大的y位置.

在添加上面其他FlatLists中的元素之前,如何让用户的y位置与他们在视图中的元素保持同步？

用户执行某些操作后，我想滚动到 ScrollView 中的特定部分，我正在使用以下代码执行此操作：

this.refs.detailsView.measure((x, y, width, height, pageX, pageY) => {
  this.refs.homeScrollView.scrollTo({ x: 0, y: pageY - 64, animated: true });
});

问题是“detailsView”视图靠近 ScrollView 的底部，在最大的 iPhone 上，scrollTo() 最终滚动到 ScrollViews“自然”最大滚动点的底部，您可以看到 ScrollViews 背景颜色（深灰色）就像您使用触摸手势过度滚动一样...ScrollView 中的组件具有绿色背景颜色。

有人建议如何在使用 ScrollView.scrollTo() 函数时防止这种“过度滚动”吗？

反应本机：v0.36

当我们刚刚通过StackNavigator导航到当前屏幕时，是否可以告诉ScrollView滚动到特定位置？

我有两个屏幕。菜单和项目。菜单是按钮的列表，每个按钮一个。“项目”屏幕包含一个使用ScrollView构建的轮播，带有图片和每个项目的详细说明。

当我单击“菜单”屏幕中的按钮时，我想导航到“项目”屏幕，然后自动滚动到该按钮代表的项目。

我读到您可以像下面这样使用StackNavigator时传递参数：但是我不知道如何在我的“项目”屏幕中读出该参数。

navigate('Items', { id: '1' })

那么这在React Native中是可能的吗，我该怎么做？还是我使用了错误的导航器？

这是我的两个屏幕的精简版：

App.js：

const SimpleApp = StackNavigator({
    Menu: { screen: MenuScreen},
    Items: { screen: ItemScreen }
  }
);

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

Menu.js

export default class Menu extends React.Component {
    constructor(props){
        super(props)
        this.seeDetail = this.seeDetail.bind(this)
    }

    seeDetail(){
        const { navigate } = this.props.navigation;
        navigate('Items')
    }

    render(){
        <Button onPress={this.seeDetail} title='1'/>
        <Button onPress={this.seeDetail} title='2'/>
    }
}

Items.js

export default class Items extends …

是否可以将 React NativeScrollView的“粘性标题”（设置为stickyHeaderIndices）粘在ScrollView.

就我而言，我在顶部有一个 80px 部分透明的标题ScrollView，我希望粘性标题粘在该标题的底部。所以我需要粘滞点距离ScrollView.

我无法创建以相同方向嵌套在FlatList内的FlatList；

结果是父级是水平的，而子级是垂直的；

这是我的代码：

renderSlides(question) {
                return <View key={question.item.code}
                             style={{flex: 1,width:350}}>
                    <FlatList
                        ref='scrollPick'
                        data={[{k:'A'},{k:'b'},{k:'c'}}]}
                        horizontal={true}
                        renderItem={(rate)=>{return (
                            <View >
                                <Text>{rate.item.k}</Text>
                            </View>);}}
                        keyExtractor={ (item, index) => index}
                    />
                </View>;

            }


render() {
        return (
            <View style={CONTAINERS.MAIN_COLUMN_BLUE}>
                <View style={[NAV.CONTAINER_GENERAL, NAV.CONTAINER_ASSESSMENT, {flex: 1}]}>
                    <TopBar barType="ex" title={I18n.t('assessment.title')} navigator={this.props.navigator}
                            closeFunction={this.handleClose}></TopBar>
                </View>
                <FlatList
                    ref={(ref) => { this.flatListRef = ref; }}
                    horizontal={true}
                    data={[{k:'1'},{k:'2'},{k:'3'},{k:'4'},{k:'5'},{k:'6'},{k:'q'}]}
                    renderItem={this.renderSlides}
                    keyExtractor={(item, index) => index}
                    horizontal={true}
                    getItemLayout={this.getItemLayout}
                    contentContainerStyle={{ flexGrow: 1}}
                />
            </View>
        );
    }
}

有人遇到过同样的问题吗？ （而且我不能使用scrollView）

在这个小吃中，我尝试在屏幕中央放置 3 张卡片，并使用水平 FlatList 并启用分页以跳转到滚动时的下 3 张卡片。

但是布局在滚动后开始被破坏，并且下一张/上一张卡片的一些像素出现在视图中。

我应该如何设置此列表的样式，使其始终在屏幕中央恰好有 3 张卡片，并且滚动将跳转到包含接下来 3 张卡片的下一页？或者像 GooglePlay 商店一样，上一张/下一张卡片的固定像素在主 3 张卡片的左侧和右侧可见。（下面的示例截图）

 <View style={{flex:1,justifyContent: \'center\', marginLeft: 5, marginRight: 5,}}>\n      <FlatList\n        horizontal\n        pagingEnabled\n        data={data}\n        keyExtractor={(item) => `\xc3\xactem-${item}`}\n        renderItem={({ item }) => (\n          <Card style={{width:Dimensions.get("window").width/3-5,marginRight:5}}>\n            {/* some content */}\n          </Card>\n        )}\n      />\n </View>\n

我不需要像snap-carousel这样的图书馆......

当您在 ReactNative 应用程序中使用 ScrollView 或 ListView 并且一些新数据进来时，它们的默认行为是保持 Scroll 组件中的位置。这意味着如果当你在 ScrollView 中间时，高度为 20 的新数据进来，屏幕上的项目将滑动 20，有时它会离开屏幕。

有没有办法保持/跟踪位置？例如，如果新的高度为 20 的数据进来，则位置自动调整位置 20，使当前屏幕项目保持在屏幕上。提前致谢。

我有一个简短的问题：当滚动视图粘住时，如何将不同的样式应用于滚动视图中的粘性标题？
我想在它粘住时添加一些阴影/高度。

谢谢 ：）

环境

• 反应原生：0.45.0

问题

我正在开发一个水平可滚动列表，每次滑动时它总是滚动整个屏幕（即一个“页面”）。当它位于第一页并且用户再次向右拉动时，我需要刷新整个列表。

对于垂直视图，如果用户在视图位于最顶部位置时向下拉，则会出现ScrollView标准。RefreshControl但对于横版来说，并没有标准的解决方案。

我的实验

这个想法

我尝试添加一个PanResponder来捕捉感人和感动的事件。请注意，我VirtualizedList在我的应用程序中使用了 a 。基本逻辑是：

• 我创建一个隐藏的View（其宽度默认设置为 0）ActivityIndicator，其中包含一个，并将此视图作为 插入ListHeaderComponent到VirtualizedList
• 我监听 的VirtualizedList事件onScroll并不断保存最新的滚动位置
• 当滚动位置接近 0 并且用户向右拉动（通过事件捕获手势PanResponder）时，我使用 ActivityIndi​​cator 对隐藏视图的宽度进行动画处理以模拟 RefreshControl 行为

结果

但是，PanResponder无法正确捕获所需的事件。大多数时候，当我在开始处向右拉动时VirtualizedList（在 Android 设备上），只会出现标准的击中边缘动画（出现渐变蓝色层）。

通过添加一些日志，我发现onPanResponderGrant偶尔会触发，但onPanResponderMove、onPanResponderRelease、onPanResponderTerminate或 都onPanResponderTerminationRequest不会被触发。

触发时onPanResponderGrant，隐藏ActivityIndicator偶尔会部分出现。“向右拉”效果只会很快出现，并且总是立即停止，只出现隐藏视图的非常狭窄的部分。

我猜底层ScrollView窃取了事件并阻止我的代码响应。但即使我设置onPanResponderTerminationRequest总是返回false仍然无济于事。即使我直接用VirtualizedList …

我正在使用 react-native-tab-view 模块在我的应用程序中实现选项卡。选项卡工作正常，但我希望当用户向下滚动列表时，应使用动画隐藏选项卡栏。

我正在使用的模块链接，即 https://github.com/react-native-community/react-native-tab-view

这是我的代码：-

import React, { Component } from 'react';
import { View, Text, ScrollView, ActivityIndicator } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

import styles from './Styles';

// First tab component
const FirstRoute = () => (
  <ScrollView>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
  </ScrollView>
);

export default class BookingDetail extends Component {

  // default states
  state = {
    index: 0,
    routes: [
      { key: …