【Android、IOS、Flutter、鸿蒙、ReactNative 】文本Text显示

XML布局 参考

android:text

Dart 复制代码
<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Android Java TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

android:textSize

Dart 复制代码
<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Android Java TextView"
    android:textSize="28sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

android:textStyle

Dart 复制代码
<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Android Java TextView"
    android:textStyle="bold"
    android:textSize="28sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

文本显示一行

Dart 复制代码
<TextView
    android:id="@+id/textview"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Android Java TextView Android Java TextView Android Java TextView"
    android:textStyle="bold"
    android:textSize="28sp"
    android:maxLines="1"
    android:ellipsize="end"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Compose 布局 参考

build.gradle下面配置

导入依赖包:

Dart 复制代码
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
Dart 复制代码
class MainComposeActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { showTextView() }
    }
}

@Preview
@Composable
private fun showTextView() {
    Text(text = "Android Compose TextView",
        fontSize = 28.sp,
        fontStyle = FontStyle.Italic)
}

解决无法预览Preview

通过 Android Studio 工具执行 Invalidate Caches

文本显示一行

Dart 复制代码
Text(
    text = "Android Compose TextView Android Compose TextView Android Compose TextView ",
    fontSize = 28.sp,
    fontStyle = FontStyle.Italic,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

Flutter 布局 参考

Dart 复制代码
Text(
  'Flutter Dart TextView',
  style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.bold),
),

显示一行文本

Dart 复制代码
Text(
  'Flutter Dart TextView Flutter Dart TextView Flutter Dart TextView ',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 28.sp,
    fontWeight: FontWeight.bold,
  ),
)

HarmonyOS布局 参考

DevEco Studio版本

显示文本

Dart 复制代码
Text(this.message)
  .fontSize(50)
  .fontWeight(FontWeight.Bold)

预览Previewer 问题

显示一行文本

Dart 复制代码
Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
          .textOverflow({overflow:TextOverflow.Ellipsis})

IOS Object-c 布局 参考

显示一行文本

objectivec 复制代码
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UITextView* textView = [[UITextView alloc]initWithFrame:CGRectMake(0, 100, 320, 300)];

    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]
                                                   initWithString:@"IOS Object-c TextView IOS Object-c TextView IOS Object-c TextView IOS Object-c TextView"];
    [attributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:28.0] range:NSMakeRange(0, attributedString.length)];
    
    textView.textContainer.maximumNumberOfLines = 1;
    textView.textContainer.lineBreakMode =  NSLineBreakByTruncatingTail;

    textView.attributedText = attributedString;
    [self.view addSubview:textView];
}

@end

IOS Swift 布局 参考

显示一行文本

objectivec 复制代码
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let attributedString = NSMutableAttributedString(string: "Ios Swift TextView Ios Swift TextView Ios Swift TextView Ios Swift TextView")
        attributedString.addAttribute(NSAttributedString.Key.font, value: UIFont.boldSystemFont(ofSize: 28.0), range: NSRange(location: 0, length: attributedString.length))

        let textView = UITextView(frame: CGRect(x: 0, y: 100, width: 320, height: 300))
        textView.attributedText = attributedString
        
        textView.textContainer.maximumNumberOfLines = 1;
        textView.textContainer.lineBreakMode =  .byTruncatingTail
        
        self.view.addSubview(textView)
    }

}

React Native 布局 参考

显示一行文本

Dart 复制代码
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
import {name as appName} from './app.json';

const ReactNativeTextView = () => {
  return (
    <View style={styles.container}>
      <Text numberOfLines={1} ellipsizeMode="tail" style={styles.hello}>
        React Native TextView React Native TextView
      </Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 28.0,
    textAlign: 'center',
    margin: 10,

  },
});

AppRegistry.registerComponent(
  appName,
  () => ReactNativeTextView,
);

搭建开发者环境

设置淘宝npm镜像

Dart 复制代码
npm config set registry https://registry.npmmirror.com/

检查当前使用的镜像

Dart 复制代码
npm config get registry

Cannot find module 'react-scripts/package.json'

Dart 复制代码
执行如下命令:

npm install --save react-scripts

执行 export 配置环境

Dart 复制代码
export JAVA_HOME= Java环境变量安装路径

例如 :

修改gradle镜像路径

修改成 阿里云镜像

运行到安卓平台

采用 npx react-native run-androidnpm start 运行

运行到IOS平台

采用 npx react-native run-iosnpm start 运行

切换到iOS目录从新安装依赖

Dart 复制代码
// 清除缓存
pod cache clean  --all

//移出本地 pod文件依赖
pod  deintegrate

//执行安装显示下载信息
pod install --verbose --no-repo-update

案例

所属分支

相关推荐
星释36 分钟前
鸿蒙Flutter实战:18-组合而非替换,现有插件快速鸿蒙化
flutter·华为·harmonyos
二流小码农1 小时前
鸿蒙开发:使用Ellipse绘制椭圆
android·ios·harmonyos
一人前行1 小时前
Flutter_学习记录_AppBar中取消leading的占位展示
flutter
二流小码农2 小时前
鸿蒙开发:使用Circle绘制圆形
android·ios·harmonyos
Macle_Chen2 小时前
XCode中使用MonkeyDev开发iOS版的Comand-line Tool的daemon程序
macos·ios·xcode·逆向·comand-line
SuperHeroWu73 小时前
【HarmonyOS 5】初学者如何高效的学习鸿蒙?
学习·华为·harmonyos·鸿蒙·入门·初学者·学习思路
二流小码农3 小时前
鸿蒙开发:使用Rect绘制矩形
android·ios·harmonyos
嘿嘿嘿呼呼嘿4 小时前
Riverpod源码分析1:Provider & ProviderFamily
flutter
丁乾坤的博客5 小时前
iOS审核被拒:Missing privacy manifest 第三方库添加隐私声明文件
ios·manifest·第三方库隐私文件
zacksleo7 小时前
鸿蒙Flutter实战:20. Flutter集成高德地图,同层渲染
flutter·harmonyos