温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

通过state来更改数据

发布时间:2020-07-17 02:18:03 来源:网络 阅读:371 作者:素颜猪 栏目:开发技术

1.样式文件style.js

代码如下:

import {

StyleSheet,

} from 'react-native';


export let styles = StyleSheet.create({

blinkText: {

fontSize: 20

},

});

截图如下:

通过state来更改数据

2.业务文件App.js

代码如下:

import React, {

  Component

} from 'react';

import {

  View,

  Text,

  AppRegistry

} from 'react-native';

// 加载样式文件

import {

  styles

} from './static/style/style';


class Blink extends Component {

  constructor(props) {

    super(props);


    this.state = {

      isShowingText: true

    };


    setInterval(() => {

      this.setState(previousState => {

        return {

          isShowingText: !previousState.isShowingText

        };

      });

    }, 1000);

  }


  render() {

    if (!this.state.isShowingText) {

      return null;

    };


    return (

      <Text style={styles.blinkText}>{this.props.text}</Text>

    );

  }

}


export default class BlinkApp extends Component {

  render() {

    return (

      <View>

        <Blink text='first blink' />

        <Blink text='second blink' />

      </View>

    );

  }

}


AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

截图如下:

通过state来更改数据

通过state来更改数据

3.运行代码截图:

通过state来更改数据

通过state来更改数据

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI