新的博客新技术ReactNative

最新推荐文章于 2025-09-07 22:13:39 发布

weixin_34060741

最新推荐文章于 2025-09-07 22:13:39 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/14962

本文介绍了一个简单的React Native应用程序示例，展示了如何创建一个带有按钮的基本应用，并通过自定义方法处理按钮点击事件。此示例包括样式设置及组件的构造。

上代码了
/**

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

'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
class AwesomeProject extends Component {
//构造
constructor(props)
{

super(props);

// 初始状态

this.state = {states:1};

}
customPressHandler = () =>
{
//自定义方法,使用属性来定义

alert('你按下了按钮,当前的状态是'+this.state.states);

};
render() {

return (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native 郝建明!

    </Text>

    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>

    <TouchableOpacity style={styles.button}
    onPress = {this.customPressHandler}
    >
    <Text style={styles.buttonText}>确定</Text>
    </TouchableOpacity>

  </View>
);

}
}

const styles = StyleSheet.create({
button:

{
//   按钮的高度
  height:40,
  //按钮的宽度
  width:100,
  //按钮的圆角
  borderRadius:20,
  //按钮的背景颜色
  backgroundColor:'green',
  justifyContent:'center',
  overflow:'hidden'

},

buttonText:{

textAlign:'center',
color:'white'

},
container: {

flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCF0'

},
welcome: {

fontSize: 20,
textAlign: 'center',
margin: 10

},
instructions: {

textAlign: 'center',
color: '#333333',
marginBottom: 5

},
});

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