如何让scrollView的内容在react-native中对齐

Question

我有一个scrollView并且在scrollView中有List，但是它的行为总是在顶部存在空白，我想将scrollView的内容对齐顶部，但无论我做了什么，它都不起作用，是有谁知道怎么做？

代码

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',
  },

根据您的喜好，请阅读react-native的弹性框教程：

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