根据文本的长度动态显示视图

16 浏览
0 Comments

根据文本的长度动态显示视图

我正在使用React Native开发一个应用，并遇到了图形问题。我需要为我的文本添加一个动态的黄色条（在一个视图中），如下所示：\n\"enter\n因此，这意味着如果我的文本较长，条应该较长，如果文本较短，条也应该较短并适应其长度。目前我使用了静态方法。我给条设置了90作为宽度，这并不好。以下是代码：\n



    {I18n.t("Il_Museum_Modena")}

\n以下是样式：\n

rowSep: {
    height: 7,
    marginVertical: 4,
    //width: Dimensions.get('window').width,
    backgroundColor: '#FABB00',
    marginBottom:12,
         },

\n您能帮助我根据文本长度来实现动态的黄色条吗？提前感谢。

0

1 答案

0 Comments

问题的原因是文本的长度不同，需要根据文本的长度动态调整视图的宽度。解决方法是使用View包裹Text，并设置View的样式表以达到所需的效果。可以使用flex和alignSelf属性来调整视图的宽度。以下是一个示例代码：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const DynamicView = ({ text }) => {
  return (
    
      {text}
    
  );
};
const styles = StyleSheet.create({
  textWrapper: {
    borderBottomWidth: 5,
    borderBottomColor: '#234532',
    borderStyle: 'solid'
  }
});
export default DynamicView;

在这个示例中，我们根据文本的长度动态调整了视图的宽度。我们将文本的长度乘以10作为视图的宽度。你可以根据自己的需求调整乘数。希望这个示例能对你有所帮助。

如果你想了解更多关于如何动态调整视图宽度的信息，你可以参考这个链接：stackoverflow.com/questions/38233789/…。这个链接中有更详细的讨论和解释。

感谢你的帮助，希望这个解决方案能让你满意。如果你还有其他问题，我们可以在聊天室中继续讨论。祝你一天愉快！

0