At times, what makes mobile app development for beginners especially with react native difficult is the fact that everything is built manually including some common and mostly used effects.

有时,使初学者进行移动应用程序开发(尤其是对本机做出React很困难)的原因是,所有内容都是手动构建的,包括一些常见且使用最多的效果。

Scrolling makes life easier when using a mobile app. The scroll function or ability is needed when part of the content fills the entire screen of the app interface, leaving behind un-displayed content.

使用移动应用程序时,滚动可简化生活。 当部分内容填满应用程序界面的整个屏幕时,需要滚动功能或功能,而留下未显示的内容。

Firstly, we import the component which is called the ScrollView component and then just add the <ScrollView> opening and closing tag around that element or output
Below is an example of an app with an image and some text which follows immediately, but it's long and occupies more than the available screen of the phone.

首先,我们导入称为ScrollView组件的组件 ,然后只需在该元素或输出周围添加<ScrollView>打开和关闭标签
以下是一个带有图像和一些紧随其后的文字的应用示例,但它很长,而且占用的空间超过了手机的可用屏幕。

So, scrolling is necessary.

因此,滚动是必要的。

Open your App's App.js file and type the following,

打开您应用的App.js文件,然后输入以下内容,

import * as React from 'react';
import {useState} from 'react';
import { Text, View, Image, ScrollView } from 'react-native';

export default function App () {

  return (
    <ScrollView>
    <View style={{padding: 10, justifyContent: 'center',
    flex: 1
}}>
    <Image
      style={{height:200, width:'100%'}}
source={{uri:'http://go237.com/wp-content/uploads/2019/12/1470399671_SEO.png'}}
      />
      <Text > Let's face it - staying committed to something (anything) can be downright difficult. Life just seems to get in the way, doesn't it? Whether it's people, things or situations, wavering in our commitment has become the norm rather than the exception. But is there a way to stay committed to something so that we follow through? Is there some formula out there that can help us see things through no matter what happens?

I don't profess to have all the answers to everything. In fact, if you had talked to me a mere 5 years ago, you would have been speaking to a person who didn't know how to stay committed to things. When the going got tough, I gave up. I threw in that proverbial towel. I couldn't bother with staying committed. I was anti-commitment, if you will.

So what changed? From then to now, how did I do such a big reversal? In that time, I've written over 40 books. Yes, forty books. And, I'm not talking about pamphlets here - real books with substance that add value to the world and dive deep into areas like self development and technology.

Not only that, but I started two wildly-successful businesses, blogged for the Huffington Post, Forbes and Engadget, and of course, got married, had two babies, quite literally traveled the world to dozens of countries and I started this blog. I didn't have to sacrifice my personal life. I didn't have to give up the things that I really loved to do. I was able to do these things while still staying committed to my goals.

How did I do it? How did I stay committed to things and see them through? When other people were rushing in and out of endeavors, I was able to stick it out. As a result, today, I know a good thing or two about commitment. I know what it takes to decide to do something and actually follow through with doing it. It's not likened to brain surgery or rocket science. It's simple and straightforward.

The Importance of Persistence
If you want to stay committed to something, you absolutely must harbor unwavering resolution to see it through. But how do you get there? How do you stay persistent while dealing with everything else in life? I used to ask myself this very question. In fact, I even wrote a book called Art of Persistence where I talked about just what being persistent meant and why it was so important.

In fact, persistence is central to any goal we might have in life. Without this one core tendency, it's easy to give up, especially when the going gets tough. I suppose I never really appreciated the importance of persistence until I failed repeatedly. It's those big failures, and the ensuing lessons, where I learned just how important persistence was. </Text>
    
    </View>
    </ScrollView>
  );
}

Output

输出量

How to Add Scrolling Functionalities in React Native App?

Properties/attributes working with this component can be found on the official documentation of react native at https://facebook.github.io/react-native/docs/scrollview

可在https://facebook.github.io/react-native/docs/scrollview上的react native的官方文档中找到使用此组件的属性/属性

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!

感谢您与我编码! 下次见。 随意发表评论或问题。 上帝祝福你!

翻译自: https://www.includehelp.com/react-js/how-to-add-scrolling-functionalities-in-react-native-app.aspx

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐