如何防止我的卷轴回到顶部？（反应天然）

发布于 2025-02-13 17:00:16 字数 915 浏览 1 评论 0原文

为了创建可滚动UI，我决定使用scrollview显示所有组件。但是，每当我尝试滚动到底部时，该应用在释放手指后立即弹回顶部。我尝试在ScrollView及其父视图中添加样式，但这似乎并没有帮助我的情况。

这是我的代码：

export default function App() {

  const items = [
    <TopText key='1' />,
    <Bar key='2' />,
    <TabDivider key='3' type="Carpool" />,
    <Tiles key='4' />,
    <TabDivider key='5' type="Schedule" />,
    <Schedule key='6' />]

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollViewStyle}>
        {items}
      </ScrollView>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    flex: 1,
    backgroundColor: 'rgba(187, 248, 237, 0.41)',
  },

  scrollViewStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  }
});

如果您可以帮助我，我将非常感谢：D

原文

In order to create a scrollable UI, I decided to use a ScrollView to display all my components. However, whenever I try to scroll to the bottom, the app bounces back to the top as soon as I release my finger. I've tried adding styling to the ScrollView and its parent view, but it doesn't seem to help my situation.

Here is my code:

export default function App() {

  const items = [
    <TopText key='1' />,
    <Bar key='2' />,
    <TabDivider key='3' type="Carpool" />,
    <Tiles key='4' />,
    <TabDivider key='5' type="Schedule" />,
    <Schedule key='6' />]

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollViewStyle}>
        {items}
      </ScrollView>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    flex: 1,
    backgroundColor: 'rgba(187, 248, 237, 0.41)',
  },

  scrollViewStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  }
});

If you can help me, I would appreciate it a lot :D

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫九 2025-02-20 17:00:17

我弄清楚了！我要做的就是将卷轴围绕视图包裹，并编辑样式。这是更新的代码：

export default function App() {

  return (
      <ScrollView>
        <View style={styles.container}>
          <TopText key='1' />
          <Bar key='2' />
          <TabDivider key='3' type="Carpool" />
          <Tiles key='4' />
          <TabDivider key='5' type="Schedule" />
          <Schedule key='6' />
          
          <StatusBar style='auto'/>
        </View>
      </ScrollView>



  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(187, 248, 237, 0.41)',
    height: 2000
  }
});

I figured it out! What I had to do was wrap the ScrollView around the view, and edit the styling. Here is the updated code:

export default function App() {

  return (
      <ScrollView>
        <View style={styles.container}>
          <TopText key='1' />
          <Bar key='2' />
          <TabDivider key='3' type="Carpool" />
          <Tiles key='4' />
          <TabDivider key='5' type="Schedule" />
          <Schedule key='6' />
          
          <StatusBar style='auto'/>
        </View>
      </ScrollView>



  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(187, 248, 237, 0.41)',
    height: 2000
  }
});

回复收藏 0 原文

~没有更多了~