标签: react-native-scrollview

我有一个反应本机组件，例如：

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

import Level from './Level';

class LevelList extends Component {
    render() {

        return (
            <ScrollView style={styles.scrollView} >
                <View style={styles.levelList}>
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                </View>
            </ScrollView>
        )
    }
}

var styles = StyleSheet.create({
    scrollView: {
    backgroundColor: '#fff',
    flex: 1,
    },
    levelList: {
        marginTop: 50,
        flexDirection:'column',
        alignItems: 'center',
    },

})

export default LevelList;

这<Level>只是一个保存文本的组件。

<LevelList>我的容器中有这样的： …

当我将焦点放在 TextInput 框中并显示键盘时，如何自动向上滚动视图，以使 TextInput 框不会隐藏在键盘后面？这个问题已经在 StackOverflow 上被问过几次了，我在这里实现了解决方案，这是大多数答案中建议的通用解决方案。该解决方案在 iPhone 模拟器中运行良好，但在实际手机上不起作用。还有其他人遇到过该解决方案在实际手机上不起作用的问题吗？

添加此解决方案后我注意到的第二件事是，现在如果我将焦点集中在 TextInput 框中并显示键盘，如果我按下按钮或尝试将焦点集中在不同的 TextInput 框中，则始终会消耗第一次触摸来隐藏键盘并且未按下按钮或其他 TextInput 框未获得焦点。对于用户来说必须进行两次操作有点烦人。还有其他人观察到这个问题吗？

如果您对如何解决这些问题有任何意见，请告诉我？

因此，我想创建一个类似于以下内容的布局。[参考图片]

因此背景上有一个全屏MapView（React Native Maps）Markers，需要单击它。

并且有一个Scrollview全屏高度超过，MapView其初始具有与其内容相关联的一些顶部利润。

但是如果我以这种方式安排视图的问题，则在初始状态下无法单击地图上的标记。

<View>
  <MapView>
    <Marker clickEventHere></Marker>
    <Marker clickEventHere></Marker>
  </MapView>
  <ScrollView fullscreen>
     <View marginTop></View>
  </ScrollView>
<View>

我不确定是否真的有可能解决这个问题。

初始状态

滚动后

尝试过的解决方案

    yScrolled = event.nativeEvent.contentOffset.y;
    yValue = this.state.yValue - yScrolled;

    upwardScroll = yScrolled > 0;

    if(upwardScroll && (yValue > 0)){
        this.setState({
            yValue: yValue
        });
    }


    if(yScrolled === 0){
        yScrolled = -10;
    }
    if(!upwardScroll && (yValue <= scrollViewMarginTop)){
        yValue = this.state.yValue - yScrolled;
        console.debug("UPDATE DOWNWARD");
        this.setState({
            yValue: yValue
        });
    }

我正在尝试使我的标签栏具有粘性，我正在使用native base标签栏，而他们正在使用"react-native-scrollable-tab-view". 我用scrollView包裹我的根视图并设置“stickyHeaderIndices={[1]}”，这对于使我的选项卡栏粘在顶部很有用，但是当这些选项卡栏粘在顶部时，滚动在粘到顶部之前停止工作它工作正常，但是当这些选项卡粘在顶部滚动条上时，它会停止工作，有什么建议吗？

我尝试添加另一个滚动视图，这样我的滚动就可以工作，但没有运气，我在选项卡内有 FlatList 组件，但在 StickyHeaderIndices 滚动工作之前，FlatList 的滚动在 StickyHeaderIndices 之后也不起作用。

 <ScrollView
      stickyHeaderIndices={[1]}
      ref={ref => this.scrollView = ref}
      onContentSizeChange={(contentWidth, contentHeight) => {
        _scrollToBottomY = contentHeight
      }}
      contentContainerStyle={{flexGrow: 1, flex: 1}}>
 >  <AnotherComponent/>
    <MyTabsComponent />
</ScrollView>

滚动应该在 StickyHeaderIndices 之后起作用。

我在 ScrollView 中有一个 TextInput。

当 TextInput 处于焦点时，滚动不起作用。此问题仅影响 Android。

我正在使用 react native v0.44.2 的滚动视图，我想禁用下拉刷新并只生成我的视图的滚动，是否有另一种方法可以在不使用滚动视图的情况下做到这一点？
看到了一些旧版本，不知道是不是最近放了这个动画。所以我的代码如下：

render() {
    return (
      <View>
        <ScrollView>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
          <View style={styles.box}>

          </View>
        </ScrollView>

      </View>
    );
  }
}

和我的风格：

const styles = StyleSheet.create({

  box: {
    backgroundColor: 'blue',
    height: 300,
    width: 200,
    borderWidth: 5,
    borderColor: 'red'
  }
});

我在屏幕中使用了 Scrollview，当我记录 y 偏移量时，我得到负值？

如何禁用 Scrollview 弹跳？

我想在我的应用程序中添加可折叠标题。我为标题视图创建了一个单独的组件。

interface Props{
    userData: UserDetails | null
    scrollY: Animated.Value
}
    
const HEADER_EXPANDED_HEIGHT = sizeProportionHeight(320)
const HEADER_COLLAPSED_HEIGHT = sizeProportionHeight(142)

const CollapsableHeader : React.FC<Props> = ({userData, scrollY}) => {
    
   const headerHeight = scrollY.interpolate({
        inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
        outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
        extrapolate: 'clamp'
    })

    return(
        <Animated.View style={{height: headerHeight, width: SCREEN_WIDTH, position:'absolute', top:0, left: 0}}/>
    )
}

export default CollapsableHeader

我的主页我添加了标题，如下所示：

interface Props{
    navigation: StackNavigationProp<MainParamList,'HomeScreen'>
    route: RouteProp<MainParamList,'HomeScreen'>
}

interface HeaderState {
    scrollY: Animated.Value   
}

interface HomeScreenState {
    header: HeaderState
}

const HomeScreen : React.FC<Props> = …

我的屏幕布局位于SectionLista 内，View并且onEndReached我正在调用 API 来成功获取分页数据（LoadMore 行为）。

由于SectionList只覆盖了屏幕的 40%，我尝试添加，ScrollView以便整个屏幕变得可滚动。

问题：当屏幕加载时，它会获取初始分页数据。渲染 UI 后，onEndReached事件被触发，进而调用 api 来再次加载更多数据。这会循环运行，直到获取完整的数据。

有没有人遇到同样的问题。任何解决方案如何阻止它。

我需要创建一个屏幕目录（类别和产品）。我正在使用 React Native 中的SectionList 来实现这一目标。

当您滚动产品列表时，我需要使“类别”组件粘在顶部。有没有任何图书馆可以帮助我使用此目录屏幕？ 请看这里的图片..

import React from "react";
import { View, StyleSheet, SectionList } from "react-native";

import Text from "../Text";

const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto"],
  },
  {
    title: "Sides",
    data: ["French Fries", "Onion Rings", "Fried Shrimps"],
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer"],
  },
  {
    title: "Desserts",
    data: ["Cheese Cake", "Ice Cream"],
  },
];

const TabCategories = () => (
  <View>
    <Text>Horizontal list of categories</Text>
  </View>
);

const Item …