無法在 React Native 中滾動到 ScrollView 的底部

Question

我有一個使用ScrollView的非常簡單的示例，但我似乎無法滾動到底部。

該示例完全是基本的，我沒有做任何特別的事情，但最后一項永遠不會完全可見。

世博會代碼

 import React, { Component } from "react";
 import { Text, View, ScrollView, StyleSheet } from "react-native";
 import { Constants } from "expo";

 const data = Array.from({ length: 20 }).map((_, i) => i + 1);

 export default class App extends Component {
  render() {
    return (
        <ScrollView style={styles.container}>
            {data.map(d => (
                <View style={styles.view}>
                    <Text style={styles.text}>{d}</Text>
                </View>
            ))}
        </ScrollView>
      );
    }
  }

const styles = StyleSheet.create({
  container: {
     paddingTop: Constants.statusBarHeight
  },
  text: {
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
    fontSize: 28
},
view: {
    padding: 10,
    backgroundColor: "#018bbc"
  }
 });

這是輸出：

Answer 1

將填充樣式應用於“contentContainerStyle”道具而不是 ScrollView 的“style”道具。

Answer 2

我的應用程序中只有一個ScrollView ，它工作正常。 然后我在頂部添加了一個標題組件，我的ScrollView的底部不再可見。 我嘗試了一切，但沒有任何效果。 直到我嘗試了所有瘋狂的事情一個小時后找到了解決方案，它就在這里。 我通過將paddingBottom作為contentContainerStyle添加到我的ScrollView來解決這個問題。

<ScrollView contentContainerStyle={{paddingBottom: 60}} >
    {this.renderItems()}
</ScrollView>

Answer 3

將flexGrow: 1設置為ScrollView的contentContainerStyle

contentContainerStyle={{ flexGrow: 1 }}

Answer 4

修改您的render()方法並將ScrollView包裝在View容器中，並將paddingTop設置為該View容器：

render() {
    return (
        <View style={ styles.container}>
            <ScrollView >
                {data.map(d => <View style={styles.view}><Text style={styles.text}>{d}</Text></View>)}
            </ScrollView>
        </View>
    );
}

Answer 5

我有這個問題並解決了它。 解決它： flex:1 表示“將其擴展到其父級大小”，如果父級的高度為 0，它將不起作用 flex:-1 表示“將其縮小以適合其子級大小”，如果子級高度設置為 flex :1（取決於父母）-> 它不會工作-> 你問我？ 我請你回來。 環形。 scrollview 有兩個視圖 -> 一個{flex:1}外部視圖包裹了一個{flex:-1}內部視圖。 當內部視圖比外部視圖高時，就是滾動發生的時候。 這也意味着外部視圖高度取決於滾動視圖父級，內部視圖取決於子級。 如果你不能給它的outer view一個高度，outer view就會變成0高度。 你不能用 0 高度的外部視圖滾動內部視圖，一旦你的手指松開，它總是會彈回原來的位置。 用<View style={{flex:1}}>包裝它可能會或可能不會解決您的問題，因為這意味着滾動視圖的父級會擴展自身以適合其父級，然后高度取決於它的父級。 （你的滾動視圖的祖父母）。 所以如果你的祖父母沒有定義身高，它就會失敗。

以下示例將不起作用

<View style={{height:300,width:200}}>
<View> //<-this break
<View {{flex:1}}>
<ScrollView>{contents}</ScrollView>
</View>
</View>
</View>

這項工作：

 var {Windowheight, width} = Dimensions.get('window');
<View style={{height:Windowheight}}>
<View style={{flex:1}}>
<ScrollView>{contents}</ScrollView>
<View>
</View>

這也有效：

 var {windowHeight, windowWidth} = Dimensions.get('window');
<View style={{height:windowHeight}}>
<Toolbar or other component with fixed height>
<ScrollView style={{flex:1}}>{contents}</ScrollView>
<Footer or other component with fixed height>
</View>

結論，確保您的滾動視圖高度可從外部和內部確定。 如果發生奇怪的事情，請跟蹤祖先，直到找到一個高度，或者在不依賴 flex 的情況下簡單地在其可跟蹤祖先中定義一個實體高度：1 一些第三方組件用<View>包裝東西，這會破壞東西。

Answer 6

為 ScrollView 添加了高度樣式。

height:'100%', width:'100%'

Answer 7

我通過將 Scrollview 的contentInset底部屬性設置為一個足以讓我看到內容最底部的值（在我的例子中是一個按鈕）來修復我的問題。

例子：

<ScrollView
  contentInset={{bottom: 80}}>
  {{ content }}
</ScrollView>

Answer 8

在不使用 % 的情況下設置子組件高度，例如 make minHeight: '10%' -> minHeight: 10