使用react-navigation包装多行自定义标头

Question

我正在使用嵌入抽屉导航器中的反应导航堆栈导航器。如果标题文本很长，我希望能够为标题文本添加两行。这是我尝试过的：

{{1}}

这不起作用。相反，标题显示为＆＃34;让我们看看如何...＆＃34;。当我尝试在我的一个屏幕中创建一个类似的文本组件时，它会按预期包装文本。

如何使用react-navigation实现多行标题？

Answer 1

这是我最终在标题中使用2行文字的内容：

static navigationOptions = ({ navigation }) => {
        return {
            title: (
                <View 
                    style = {{width: 220, height: 50}}
                >
                    <Text 
                        numberOfLines = {2} 
                        style = {{color: Colors.ORANGE, fontWeight: '700', fontSize: 14, textAlign: 'center', marginRight: 60, marginTop: 12}}
                    >
                        Let's see how long the title can be
                    </Text>
                </View>
            ),
            headerTintColor: Colors.ORANGE,
            headerRight: 
          <MenuIcon 
              navigation = {navigation}  
          />,
        };
    }

Answer 2

固定的fun TextView.expand(maxLines: Int? = null) { val animation = ObjectAnimator.ofInt(this, MAX_LINES_PROPERTY_NAME, maxLines ?: this.lineCount) animation.setDuration(EXPAND_ANIMATION_DURATION).start() } 标头不适用于所有屏幕尺寸。

我要做的是设置百分比宽度并设置绝对位置。

width