React Native中ScrollView不遵守父容器justifyContent属性如何解决

问题根因 #

父容器的justifyContent: center只会作用于其直接子节点ScrollView本身，无法作用到ScrollView内部的内容容器。ScrollView默认的内容容器高度跟随内容自适应，当文本高度小于ScrollView可视高度时，内容会默认顶在顶部，无法居中。

最优实现方案 #

不需要判断文本长度，通过配置ScrollView的相关样式即可实现全场景适配：

1. 给ScrollView本身设置flex: 1，让其撑满父容器的可用高度
2. 给ScrollView添加contentContainerStyle属性，设置flexGrow: 1让内容容器在内容不足时撑满ScrollView的可视高度
3. 在contentContainerStyle中设置justifyContent: center，实现内容垂直居中

该方案可自动适配所有场景：文本较短时内容垂直居中，文本长度超过容器高度时自动出现滚动条，不影响滚动功能，无需适配不同屏幕和换行场景。

完整修改后代码 #

import React from 'react';
import { Text, ScrollView, StyleSheet, TextStyle, View, ViewStyle } from 'react-native';

interface TODO_TextCard {
  text: string,
}

export const TODO_TextCard: React.FunctionComponent<TODO_TextCard> = (props: TODO_TextCard) => {
  return <View style={styles.viewStyle}>
    <ScrollView 
      style={styles.scrollViewStyle}
      contentContainerStyle={styles.scrollContentStyle}
    >
      <Text style={styles.quoteTextStyle}>{props.text}</Text>
    </ScrollView>
  </View>;
}
const styles = StyleSheet.create({
  quoteTextStyle: {
    fontSize: 30,
    fontStyle: 'italic'
  } as TextStyle,
  viewStyle: {
    flex: 1,
    borderWidth: 2, 
    borderColor: 'red',
    paddingHorizontal: 10
  } as ViewStyle,
  scrollViewStyle: {
    flex: 1
  } as ViewStyle,
  scrollContentStyle: {
    flexGrow: 1,
    justifyContent: 'center'
  } as ViewStyle
});

内容的提问来源于stack exchange，提问作者user7858768