react-native state

最新推荐文章于 2021-02-23 21:46:23 发布

tianxia1202

最新推荐文章于 2021-02-23 21:46:23 发布

阅读量293

点赞数

CC 4.0 BY-SA版权

分类专栏： reactc-native 文章标签： state

本文链接：https://blog.youkuaiyun.com/tianxia1202/article/details/79338718

reactc-native 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用React Native创建的简单应用实例，该应用通过定时器使文本在一秒钟的时间间隔内显示和隐藏，实现文本闪烁的效果。示例中包含了多个带有不同文本的闪烁组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import { AppRegistry,Text,View } from 'react-native';

class Blink extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showText: true,
        }
        //每1000ms对showText做一次取反
        setInterval(()=>{
            this.setState(previousState=>{
                return { showText: !previousState.showText }
            })
        },1000)
    }
    render() {
        let display = this.state.showText ? this.props.text: ''
        return(
            <Text>
               { display }
            </Text>
        )
    }
}
export default class ShowText extends Component {
    render() {
        return (
            <View>
                <Blink text="爱你，却不能开口"/>
                <Blink text="在这个世界上，最伤心的莫过于喜欢你却不知道你叫什么名字"/>
                <Blink text="若是有缘，那时你未嫁，我未婚，娶你可好？"/>
                <Blink text="我想的是你，而你却永远不会知道！你说是不是很搞笑"/>
            </View>
        )
    }
}

AppRegistry.registerComponent('xiao', () => ShowText);