React-Native：滚动视图不尊重证明内容？答案

【问题标题】：React-Native: Scroll view does not respect justify content?React-Native：滚动视图不尊重证明内容？
【发布时间】：2021-10-18 04:56:49
【问题描述】：

当尝试使用 ScrollView 时，它似乎不尊重其父容器的 justifyContent。

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>
      <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',
    justifyContent: 'center',
    paddingHorizontal: 10
  } as ViewStyle,
});

      <TODO_TextCard text={'The mind adapts and converts to its own purposes the obstacle to our acting. The impediment to action advances action. What stands in the way becomes the way'}/>

渲染为：

现在，如果我删除并只渲染文本，例如

export const TODO_TextCard: React.FunctionComponent<TODO_TextCard> = (props: TODO_TextCard) => {

  return <View style={styles.viewStyle}>
      <Text style={styles.quoteTextStyle}>{props.text}</Text>
  </View>;
}

Text 元素确实尊重父级的 justifyContent:center 并呈现为：

滚动视图可以居中吗？

我现在想到的解决方案是检查文本的长度并有条件地渲染滚动视图，例如：


/** This some text length would have to be different depending on the device screen, and
 *  even with different device screens would still not work all the time if the text
 *  can have new lines in it.*/
const SOME_TEXT_LENGTH = 300;
export const TODO_TextCard: React.FunctionComponent<TODO_TextCard> = (props: TODO_TextCard) => {

  return <View style={styles.viewStyle}>

    {props.text.length > SOME_TEXT_LENGTH ?
      <ScrollView>
        <Text style={styles.quoteTextStyle}>{props.text}</Text>
      </ScrollView>
      :
      <Text style={styles.quoteTextStyle}>{props.text}</Text>
    }
  </View>;
}

这非常不理想，因为不同的设备屏幕以及文本可能有新行。

【问题讨论】：

标签： css react-native flexbox scrollview

【解决方案1】：

ScrollView 实际上尊重其父级的justifyContent:center。 ScrollView 放置在外部 View 组件的中心。但是这里的 ScrollView 占据了整个竖屏，所以看起来好像没有居中。

尝试设置<ScrollView style={{backgroundColor: 'green'}}> 看看我的意思。

尝试将viewStyle 或类似样式应用于 ScrollView 本身。确保使用属性contentContainerStyle 而不是style。这个 sn-p 对我有用。

<View style={styles.viewStyle}>
  <ScrollView contentContainerStyle={{flex: 1, justifyContent: 'center'}}>
    <Text style={styles.quoteTextStyle}>{props.text}</Text>
  </ScrollView>
</View>

我还找到了this 文章。也许它也能帮助你。

【讨论】：

【解决方案2】：

你需要给 ScrollView 设置样式，你可以使用 style 或 contentContainerStyle 属性来设置 ScrollView 的样式：

style 定义了 ScrollView 的外部容器，例如它的高度和与兄弟元素的关系

contentContainerStyle 定义它的内部容器，例如项目对齐、填充等

在您的情况下，您需要提供 contentContainerStyle 来定位您的项目，例如：

return (
   <View style={styles.viewStyle}>
    {props.text.length > SOME_TEXT_LENGTH ?
      <ScrollView 
          contentContainerStyle={{
                  flex: 1,  //To take full screen height
                  justifyContent: 'center',
                  alignItems: 'center,
     }}>
        <Text style={styles.quoteTextStyle}>{props.text}</Text>
      </ScrollView>
      :
      <Text style={styles.quoteTextStyle}>{props.text}</Text>
    }
  </View>
);

【讨论】：