javascript 当用户不在屏幕底部时，如何在ScrollView中显示scrollToBottom- React Native

wqlqzqxt 于 2023-01-04 发布在 Java

关注(0)|答案(2)|浏览(117)

我正在开发一个聊天应用程序，其中有一个ChatScreen，假设用户向上滚动聊天，现在只有当用户不在底部时，才会出现scrollToBottom按钮（就像流行的聊天应用程序一样），所以我尝试了以下操作：
首先我尝试检测用户何时滚动ScrollView，然后使用onScroll prop nativeEvent检测用户是否不在底部，即他/她向上滚动。然后如果是这样，我显示应该出现在聊天屏幕右下角的按钮。
下面是我的方法的代码。（如果条件满足，是否可以在onScroll prop中返回View组件？）

<ScrollView
  ref={scrollViewRef}
  onScroll={({nativeEvent}) => {
    const isCloseToBottom = nativeEvent.layoutMeasurement.height + nativeEvent.contentOffset.y > nativeEvent.contentSize.height - 30;
    if (!isCloseToBottom) {
      console.log('show scroll to bottom button')
      return (
        <TouchableOpacity style={{position:'absolute', bottom:40, right:10, backgroundColor:'grey'}} onPress={() => scrollViewRef.current.scrollToEnd()}>
          <Icon ... />
        </TouchableOpacity>
      )
    }
  }}
>
...
</ScrollView>

这就是我所尝试的，虽然当我使用console.log('show scroll to bottom button')调试时，如代码所示，它被触发了，但我无法在屏幕上呈现/看到Button组件。（我尝试在<TouchableOpacity />的样式属性中设置opacity:1和zIndex:1，但仍然看不到）。
我做错了什么？任何解决这个问题的方法都将非常感激。

JavaScript

来源：https://stackoverflow.com/questions/70701044/how-to-show-scrolltobottom-in-a-scrollview-when-user-is-not-at-the-bottom-of-scr

2条答案

按热度按时间

ovfsdjhp1#

好吧，临时的解决方案是创建一个状态并进行条件渲染（我认为这种方法不是最佳的，因为我们将在每次用户向上滚动或onScroll触发时设置状态）。

const [isScrolling, setIsScrolling] = useState(false);
<ScrollView
  ref={scrollViewRef}
  onScroll={({nativeEvent}) => {
    const isCloseToBottom = nativeEvent.layoutMeasurement.height + nativeEvent.contentOffset.y > nativeEvent.contentSize.height - 30;
    if (!isCloseToBottom) {
      setIsScrolling(true);
    } else setIsScrolling(false);
  }}
>
...
</ScrollView>

{
  isScrolling && // return your component here...
}

赞(0）回复(0）举报 2023-01-04

insrf1ej2#

我假设你的第一个渲染视图总是在底部，所以你可以用圆括号把你的组件包起来，然后先设置一个条件，比如：

const [isBottom, setIsBottom] = useState(true)

<>
  <ScrollView
    onScroll={(e) => {handleScrolling(e)}}
  >
    return
  </ScrollView>
  {!isBottom &&
    <Touchable style={{ position: 'absolute', right: 20, bottom: 20}}>
      <Text>Last messages</Text>
    </Touchable>
   }
</>

如果你想添加一些动画，你可以使用Animated.View。
另一种验证用户是否在底部的方法是使用index，但您需要使用<FlatList/>。

if (index !== data.lenght -1) {
   setIsBottom(false)
}

在const renderItem = (index) => {}上传递值

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 当用户不在屏幕底部时，如何在ScrollView中显示scrollToBottom- React Native

2条答案

相关问题

热门标签

最新问答