在 React Native (iOS) 中使内容适合视图的高度

Question

我正在尝试将动态内容放入固定高度的视图中，在本例中为屏幕高度，而不会溢出（因此不需要垂直滚动）。

这与其他类似问题相反，他们希望 View 的高度由内容决定。

到目前为止我所拥有的：

  <SafeAreaView style={styles.container}>
    <ScrollView scrollEnabled={false}>
        <View style={styles.displayContainer}>
            {splitWords.map(word => (
              <Text
              style={styles.textDisplay}
              adjustsFontSizeToFit={true}
              numberOfLines={1}
              style={{fontSize: 200}}
              >
                {word}
              </Text>
            ))}
        </View>
      )}
    </ScrollView>
  </SafeAreaView>

我尝试了 flex、flexShrink、flexWrap 等的各种组合，但似乎无法理解。 这是样式表：

const styles = StyleSheet.create({
container: {
  flex: 1,
},
textDisplay: {
  // Not sure what to try here next
},
displayContainer: {
  padding: 2,
  height: height - 130, // Height is obtained by Dimensions.get('window').height;
  width: width, // Width is obtained by Dimensions.get('window').weight;
  //alignSelf: 'stretch'
  //flex: 0,
  //flexWrap: 'nowrap',
  //flexDirection: 'column',
  //flexShrink: 1,
 },
});

我将不胜感激。

Answer 1

尝试在 ScrollView 组件中添加以下道具。

<ScrollView flex={{ flex: 1 }} contentContainerStyle={{ minHeight: "100%" }}>
   ...
</ScrollView>