React Native --props使用之吹气球例子

       最近在学React Native，在慕课网学习了crazyboy的基础入门视频，把吹气球使用props的代码照敲了一遍，记录下。

初始化一个项目后，首先在VScode项目目录中导入气球图片

然后在App.j中进行相应代码修改

/**

* Sample React Native App

* https://github.com/facebook/react-native

*

* @format

* @flow

*/

 

import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View, Image} from 'react-native';

 

const instructions = Platform.select({

ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',

android:

'Double tap R on your keyboard to reload,\n' +

'Shake or press menu button for dev menu',

});

 

type Props = {};

export default class App extends Component<Props> {

       constructor(props){

            super(props);

            this.state={

             size: 80,

      }

}

 

render() {

return (

     <View style={styles.container}>

           <Text style={styles.qiqiu} onPress={()=>{

                this.setState({

                  size:this.state.size+10

               })

            }

        }>吹啊，吹啊</Text>

   <Text style={styles.qiqiu} onPress={()=>{

          this.setState({

           size:this.state.size-10

           })

        }

       }>变小，变小</Text>

    <Image source={require("./photo/qiqiu.jpg")} style={{width:this.state.size, height:this.state.size}} />

    </View>

     );

    }

}

 

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

qiqiu:{

fontSize: 20,

margin: 10,

},

});

运行效果：