在 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>