【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

案例

所属分支

相关推荐
Harmony_QI2 小时前
鸿蒙北向开发环境安装指南
华为·harmonyos·鸿蒙
zhlx28352 小时前
【免越狱】iOS砸壳 可下载AppStore任意版本 旧版本IPA下载
macos·ios·cocoa
XZHOUMIN13 小时前
网易博客旧文----编译用于IOS的zlib版本
ios
爱吃香菇的小白菜16 小时前
H5跳转App 判断App是否安装
前端·ios
jhonjson16 小时前
Flutter开发之flutter_local_notifications
flutter·macos·cocoa
iFlyCai17 小时前
23种设计模式的Flutter实现第一篇创建型模式(一)
flutter·设计模式·dart
郝晨妤18 小时前
[HarmonyOS]简单说一下鸿蒙架构
华为·架构·harmonyos·鸿蒙
恋猫de小郭19 小时前
Flutter 小技巧之 OverlayPortal 实现自限性和可共享的页面图层
flutter
二流小码农21 小时前
鸿蒙开发:ForEach中为什么键值生成函数很重要
android·ios·harmonyos
hxx2211 天前
iOS swift开发--- 加载PDF文件并显示内容
ios·pdf·swift