反應本機，ScrollView的孩子不會填充全高

所以我有一個水平滾動視圖在視圖的頂部。 ScrollView包含具有指定寬度的節點。然後，我在ScrollView的底部有一個邊框，就像您在此屏幕上所看到的一樣：http://i.imgur.com/pOV1JFP.png 反應本機，ScrollView的孩子不會填充全高

正如您所看到的，頂部的ScrollView的子節點沒有到達邊界。但是，如果我將滾動視圖更改爲flexDirection: 'row'的視圖，則子節點將填充高度。我試着在滾動視圖改變一些特性，如：

上contentContainerStyle
automaticallyAdjustContentInsets={false}
設置padding:0改變的contentInsets值直接

這些都不似乎修復問題。

了滾動碼&風格：

var styles = StyleSheet.create({ 
    nav: { 
    padding: 0, 
    marginTop: 30, 
    flex: 1, 
    borderBottomWidth: 1, 
    borderColor: '#000000' 
    } 
}); 

<ScrollView 
    style={[{width: screen.width}, styles.nav]} 
    horizontal={true} 
    showsHorizontalScrollIndicator={true} 
    automaticallyAdjustContentInsets={false}> 
    {dayNavItems} 
</ScrollView>

子組件（佔dayNavItems）

const styles = StyleSheet.create({ 
    container: { 
    paddingLeft: 15, 
    paddingRight: 15, 
    width: 50, 
    justifyContent: 'center' 
    }, 
    odd: { 
    backgroundColor: '#ccc' 
    }, 
    selected: { 
    backgroundColor: '#39b54a' 
    }, 
    text: { 
    fontFamily: 'Optima' 
    } 
}); 

class DayNavItem extends React.Component { 
    static propTypes = { 
    day: React.PropTypes.object.isRequired, 
    odd: React.PropTypes.bool, 
    selectDay: React.PropTypes.func.isRequired, 
    selected: React.PropTypes.bool 
    }; 

    render() { 
    const d = new Date(this.props.day.created_at); 
    const viewStyles = [styles.container]; 
    if (this.props.selected) { 
     viewStyles.push(styles.selected); 
    } else if (this.props.odd) { 
     viewStyles.push(styles.odd); 
    } 
    return (
     <TouchableOpacity style={viewStyles} onPress={() => this.props.selectDay(this.props.day.uuid)}> 
     <View> 
      <Text style={styles.text}>{getMonth(d)}</Text> 
      <Text style={styles.text}>{d.getDate()}</Text> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 
}

來源

2016-01-19 agmcleod

您可以顯示ScrollView和父級的代碼和樣式嗎？ –

感謝您的代碼，現在覈對一下。 –

您是否嘗試過爲容器組件設置高度？我已經得到了你正在工作的東西，但我必須給組件一個高度屬性：https://rnplay.org/apps/QP4sBw –

有一個叫contentContainerStyle了滾動屬性。我剛剛解決了類似的問題，我將flex：1設置爲：ScrollView樣式，scrollView contentContainerStyle和子View組件。

來源

2017-10-23 11:04:21

反應本機，ScrollView的孩子不會填充全高

回答

相關問題