javascript - React Native 适配文本组件

Question

我试图让我的文本适合可用区域，我的约束是这样的:

• 文字不应溢出，
• 文本必须在所有可用 View 中放大，
• 单词不应该被分解成字符并转到下一行句子可以，
• 当我在父 View 中使用 flex 时，文本的水平扩展 View 不应超过屏幕宽度。

这是我的代码片段:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Font } from "expo";
import Lorem from "./src/helpers/lorem-ipsum-gen";

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      fontLoaded: false,
    };
  }
  //theboldfont.ttf
  async componentWillMount() {
    await Font.loadAsync({
      "akzidenz-grotesk-bq-bold": require("./assets/fonts/AkzidenzGrotesk_BQ_Bold.otf"),
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    let loremText = new Lorem().generate(20)

    return (
      <View style={styles.container}>
        <View>
          <View style={{ flex: 0.37 }} > </View>
          <View style={{ flex: 0.25, backgroundColor: "red" }} >
            <View >
              {
                this.state.fontLoaded ? (<Text
                  style={{ fontFamily: "akzidenz-grotesk-bq-bold", fontSize: 50 }}
                  adjustsFontSizeToFit={true}
                >
                  {loremText}
                </Text>) : null
              }

            </View>
          </View>
          <View style={{ flex: 0.38 }} >
            <Text>
              {loremText}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

结果:

我为实现目标所做的努力:

• 我认为它与自定义字体有关并更改为默认字体(无效)
• 在一些 github 问题中，人们在 text style prop 中写了 adjustsFontSizeToFit={true}(未工作)
• 我试过 allowFontScaling(没用)
• 删除字体大小(无效)
• 删除了 flex 并设置静态宽度和高度以查看(无效)
• 上述所有步骤的组合(无效)

Answer 1

因此，在文本组件上尝试新事物后，我发现 adjustsFontSizeToFit={true} 在不指定 numberOfLines={number} 的情况下无法正常工作，但它正在划分我的有时在行尾将单词转换为字符。从文档中可能它在 android 中不可用。所以我仍然需要一个更好的方法来找到解决我问题的方法