スクロールビューの内容を反応ネイティブで一番上に揃える方法

Question

私はスクロールビューを持っていますが、スクロールビューにはリストがありますが、常にトップに空白があります。私がしたこと、それはうまくいかなかった、それをどうやってできるのか誰も知っていますか？

コード

const { height } = Dimensions.get('window') //eslint-disable-line 

const list = SIDEBAR_LINKS 

const styles = { 
    containerStyle: { 
    borderBottomWidth: 0, 
    }, 
    wrapperStyle: { 
    paddingLeft: 43, 
    }, 
    scrollView: { 
    height, 
    backgroundColor: '#000000', 
    flex: 1 
    } 
} 



//@observer 
const SideBar = observer(({ store }) => { 

    const { containerStyle, wrapperStyle, scrollView } = styles 

    return(
    <ScrollView style = {scrollView} contentContainerStyle={{flexGrow: 1}}> 
     <List style = {{backgroundColor: '#ff0000', flex: 1, paddingTop: 100, justifyContent: 'flex-start'}}> 
     <ListItem 
      containerStyle={{ height: 43, backgroundColor: '#F5F5F5', borderBottomWidth: 0.5, borderBottomColor: '#BDBDBD'}} 
      rightIcon={{ name: 'menu', color: 'black' }}    
     /> 
     <ListItem 
      roundAvatar 
      containerStyle={containerStyle} 
      avatar={ store.user.photoURL } 
      title={ store.user.displayName } 
     /> 
     { 
      list.map((item, i) => (
       <ListItem 
       key={i} 
       containerStyle={containerStyle} 
       wrapperStyle={wrapperStyle} 
       underlayColor={'#f8f8f8'} 
       title={item.title} 
       leftIcon={{ name: item.icon }} 
       badge={false} 
       /> 
     )) 
     } 
     </List> 
    </ScrollView> 
) 
} 

ピクチャー

Answer 1

使用してみてください：

：

あなたの好みのために

containerStyle: { 
    borderBottomWidth: 0, 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'flex-start', 
    }, 

、反応し、ネイティブのフレックスボックスのチュートリアルを読んでください

https://facebook.github.io/react-native/docs/flexbox.html