ReactNative 基础 - 05 (Text文本)

news/2024/7/15 19:47:46 标签: react native, react.js, javascript

文本必须写在Text标签中

numberOfLines:显示几行,其他的...隐藏

Text作为容器时,关于文本的相关属性设置可以继承

letterSpacing:文字间隔

javascript"><View style={{color: 'red', fontSize: 30}}>
    <Text style={{fontSize: 30}} numberOfLines={5}>   {/* 无法继承View的样式 */}
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error
        mollitia accusantium at eum aut dolorum velit sed quis qui quos quo
        nulla sapiente, incidunt itaque? Ipsum corrupti sapiente delectus
        omnis?
     </Text>
     <Text style={{color: 'red', fontSize: 30, letterSpacing: 5}}>
        <Text>hello react</Text>   {/* 可以继承Text的样式 */}
        <Text>hello vue</Text>
     </Text>
</View>


http://www.niftyadmin.cn/n/508623.html

相关文章

ReactNative 基础 - 06 (按钮:Button、TouchableOpacity)

1、系统按钮 <Button> </Button> 2、自定义按钮 <TouchableOpacity> </TouchableOpacity> 内部的文本&#xff0c;写在<Text>中 activeOpacity&#xff1a;点击激活时的透明度 onPress&#xff1a;点击事件 <Button title"按钮"…

ReactNative 基础 - 07 (背景图ImageBackground、状态栏statusBar)

1、状态栏&#xff1a;statusBar StatusBar.currentHeight&#xff1a;状态栏的高度 沉浸式&#xff1a; backgroundColor"transparent"&#xff1a;透明 translucent&#xff1a;可穿透 2、背景图&#xff1a;ImageBackground 背景图必须给宽高&#xff0c;背景图覆…

ReactNative 基础 - 08 (开关Switch、文本输入框TextInput)

开关和输入框&#xff1a;受控组件&#xff0c;通过状态修改值和对应的操作 1、开关&#xff1a;Switch value&#xff1a;开启状态 onValueChange&#xff1a;值发生改变触发 2、文本框&#xff1a;TextInput secureTextEntry&#xff1a;密文显示 onChangeText&#xff1a;…

ReactNative 基础 - 09 (活动提示器ActivityIndicator)

加载时转动的小圆圈&#xff1a;ActivityIndicator&#xff0c;可以通过size、color设置尺寸大小 export default class App extends Component {render() {return (<View><ActivityIndicator size"large" color"orange" /><View style{{a…

ReactNative 基础 - 10 (fetch发送网络请求)

App不存在跨域问题 网络请求&#xff1a;默认打印的数据&#xff0c;默认显示在cmd命令行中&#xff0c;可以通过开发中模式进行调试查看数据 调试模式&#xff1a;有缺陷&#xff0c;会报错&#xff0c;某些功能会异常&#xff08;输入框无法获取焦点、错误警告、定时器不准…

ReactNative 基础 - 11 (FlatList组件,核心属性data、renderItem、keyExtractor,分割组件,头部组件,尾部组件)

FlatList组件支持下拉刷新、触底加载、回到顶部、头部、尾部组件、行分割组件等待 1、核心属性&#xff1a; data&#xff1a;需要显示的数组数据 renderItem&#xff1a;数组每个元素对应的界面ui标签的样式&#xff08;标签&#xff09; keyExtractor&#xff1a;每个ui的唯…

ReactNative 基础 - 12 (网络请求 + FlatList,实现触底加载、下拉刷新、回到顶部,多列布局)

onEndReached&#xff1a;触底加载 onEndReachedThreshold{0.1} &#xff1a;触底加载的位置&#xff0c; 默认是未显示区域 可见高度为50%&#xff08;0.5&#xff09; onRefresh&#xff1a;下拉刷新&#xff08;触发事件时&#xff0c;需要将refreshing设为true&#xff0…

页面上有多个按钮,点击按钮,输出当前是第几个按钮

通过for循环&#xff0c;内部采购匿名函数自调用的方式&#xff0c;将每一次循环的i保存出来&#xff0c;那么&#xff0c;在点击按钮时&#xff0c;就能得到当前的按钮序号 &#xff08;不采用闭包方式的话&#xff0c;点击按钮时&#xff0c;当前案例中i已经是5了&#xff0…