标签: react-native-scrollview

在使用Objective-C的iOS中,我们可以UITableView使用scrollToRowAtIndexPath方法滚动到特定的行索引但在React-Native中我没有找到这种方法来滚动Listview特定的行索引.

以下是该场景,

1. 有Listview这样的可扩展行,就像敲击它扩展和可扩展行包含TextInput组件.
2. 在输入文本时TextInput,键盘将显示出来,理想情况下,此时Listview键盘Listview应向上滚动(一旦键盘下降,应向下滚动到其先前位置).

这可以通过Native-iOS轻松实现,但我被困在React-Native中.

我按照方式做了但是没有做到

有称为方法scrollTo(x:0,y:10,animated:true)中Listview组分(实际上是其的方法Scrollview),通过该可滚动向上/向下基于所述y坐标父视图的.

我在我的代码中成功接收了键盘的向上和向下事件,并且基于这种情况我可以通过某种方式管理键盘启动时的scrollTo方法(通过计算y坐标)(如@ Alexey的答案中所述)但我不知道如何计算y键盘关闭时的坐标？(理想情况下,此时Listview应向下滚动到其先前的位置).

任何帮助或提示将不胜感激!

我想使用scrollView,当我滚动顶部时,它具有顶部元素的背景颜色(绿色),当它在底部反弹时,它具有底部元素的颜色(白色).我不知道怎么能这样做.

<ScrollView style={{backgroundColor: MColor.WHITE, marginTop: 64, height: Display.height - 64 - 72}}>
  <View style={{backgroundColor: 'green', height: 200}} />
  <View style={{backgroundColor: 'white', height: 800}} />
</ScrollView>

任何帮助是值得赞赏的,可能有人可以在底部和顶部设置假视图,但我不确定如何做到这一点.

我正在使用FlatList和一个结果ListHeaderComponent作为我的屏幕的根组件.我不希望它的顶部在滚动上反弹,但我想保持底部弹跳以用于UX'n'feel目的,因为FlatList支持无限滚动.任何想法怎么样？

如何知道用户滚动ScrollView. 我想根据方向显示一个动作按钮。我正在尝试使用以下代码找到方向：

import React, {Component} from 'react'

import { StyleSheet, Alert, ScrollView, View, Text } from 'react-native' 

class ScrollDirection extends Component {
  constructor(props){
    super(props);
    this.state = {
      offset: 0
    }
  }

  onScroll(event){
    var currentOffset = event.nativeEvent.contentOffset.y;
    var direction = currentOffset > this.offset ? 'down' : 'up';
    this.state.offset = currentOffset;
    Alert.alert(direction);
  }


  render() {
    return (
      <View style={styles.container}>        
        <ScrollView onScroll={this.onScroll}>
          <View style={styles.scroller}>
           <Text style={{fontSize:20,}}>ScrollDirection</Text>
          </View> 
        </ScrollView>
      </View>
    )
  }

}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: …

当我FlatList在内部使用组件时ScrollView，我看到一条警告：

VirtualizedList 永远不应该嵌套在具有相同方向的普通 ScrollView 中 - 请改用另一个 VirtualizedList 支持的容器。

前后FlatList我使​​用了很多其他组件，而且我的屏幕很长。

我尝试用 来包装内容SafeAreaView，但它对我没有帮助，因为在这种情况下我无法滚动内容。我也尝试在 中使用ListHeaderComponent={SafeAreaView}and 。ListFooterComponent={SafeAreaView}<FlatList>

我用：

• “反应”：“16.9.0”，
• “反应本机”：“0.61.5”，

scrollEnabled当滚动到达某个位置时，如何更改React Native ScrollView param的 bool 值？

我确实在 ScrollView 中有一个 ScrollView，由于外部 ScrollView，内部 ScrollView 没有响应。当scrollEnabled参数设置为False外部 ScrollView时，内部 ScrollView 起作用。我的想法是将外部 ScrollView 动态设置为scrollEnabled={false}到达底部时。我该怎么做呢。

谢谢，

我正在尝试在 ScrollView 中为我的 EMT 课程的测验应用程序创建一系列“抽认卡”。用户应该点击卡片，然后将其翻转以显示答案。ScrollView 中的卡片组之间有标题。

卡片动画是通过这个容器实现的，它绝对定位卡片。我无法让卡片正确显示 - 它要么没有高度，根本没有出现，看起来被压扁，或者，如果我通过编辑 FlipView 代码删除了绝对定位，则高度会加倍，以便为前面腾出空间然后回来。

Demo代码，可以直接粘贴到index.ios.js中：

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  ScrollView,
  TouchableOpacity
} from 'react-native';
import FlipView from 'react-native-flip-view';

const data = [
  { type: 'default', text: 'some text' },
  { type: 'header', text: 'header text'},
  { type: 'default', text: 'some more text'}
];

class TextLine extends Component {
  constructor(props) {
    super(props);
    this.state = { isFlipped: false };
  }

  _flip = () => { …

我想要使用scrollToIndex的功能FlatList上作出反应，本地人。但是，当我切换FlatList到 时createAnimatedComponent(FlatList)，它ref变成了undefined。

有没有办法在我使用时保持FlatList's ？refcreateAnimatedComponent

谢谢你的关心。

我正在对我scrollview的.slideimageBackground

我用来pagingEnabled滑动图像。index但是有没有办法让我每次刷卡时都能得到号码？

我正在使用滚动视图，如下面的代码。添加pagingEnabled将使滚动视图像 a 一样工作swiper，但我不知道如何获取index.

<ScrollView horizontal={true} pagingEnabled={true}>
            {this.createScrollImageSources(this.state.image)}
</ScrollView>

我想创建一个水平 ScrollView，但我遇到了一些问题。ScrollView 占用了屏幕的所有剩余空间，但我想要的是 ScrollView 仅占用最大子项的高度。我怎样才能做到这一点？

我尝试在样式上设置固定高度，但这不起作用。有什么帮助吗？

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.guessList}>
{guessList.map((guess, index) => (
    <NumberContainer style={styles.guessItem} key={guess}>#{guessList.length - index} {guess}</NumberContainer>
))}

const styles= StyleSheet.create({
guessList: {
    height: 70
},
guessItem: {
    marginRight: 5
}

});

Fab 按钮在滚动视图上不起作用。我正在使用 React-native-paper 中的 FAB，并且显示了图标，但是当我按下 fab 按钮时，它不起作用。作为替代方案，我尝试制作一个粘性按钮，当我使用滚动视图时，该按钮会粘在底部，但该按钮显示在滚动视图内容之后，并且没有固定在屏幕底部。它也失败了。

我的代码是这样的：

<View>
   <FAB style={{position:'absolute',right:0,bottom:0}}/>
   <ScrollView></ScrollView>
</View>