React Native 上手 - 5.ScrollView

React Native

上一篇：React Native 上手 - 4.處理用戶輸入

滾動(dòng)視圖 ScrollView

在手機(jī) App 中，大部分界面的內(nèi)容都沒法同時(shí)展示在屏幕上，因此需要用戶可以滑動(dòng)屏幕。

在 React Native 中，如果在一個(gè) View 元素中加入過多的內(nèi)容，導(dǎo)致一個(gè)屏幕方法下，那用戶就無法看到超出屏幕的部分，且 View 元素不支持滑動(dòng)屏幕的操作。

因此需要用一個(gè) ScrollView 組件來包裹內(nèi)容，例如：

<ScrollView>
    // 此處放入內(nèi)容
</ScrollView>
ScrollView

這樣，當(dāng)屏幕中的元素超過屏幕范圍時(shí)，就可以通過上下滑動(dòng)屏幕來瀏覽所有的內(nèi)容。

若要屏幕支持橫向滾動(dòng)而不是縱向滾動(dòng)，只需要給 ScrollView 設(shè)置一個(gè) horizontal 屬性即可。

<ScrollView horizontal>

效果如下：

橫向滾動(dòng)視圖

下一篇：React Native 上手 - 6.ListView

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容