通過(guò)state來(lái)更改數(shù)據(jù)

1.樣式文件style.js

代碼如下：

import {

StyleSheet,

} from 'react-native';

export let styles = StyleSheet.create({

blinkText: {

fontSize: 20

},

});

截圖如下：

2.業(yè)務(wù)文件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);

截圖如下：

3.運(yùn)行代碼截圖：