React Native之Props(属性)和State(状态)和简单样式简单使用

1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下

/*** Sample React Native App* https://github.com/facebook/react-native** @format* @flow*/import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, NativeModules, DeviceEventEmitter, 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',
});
var myAndroidToast = NativeModules.MyToast;
type Props = {};class Greet extends Component {render() {return (<Text>Hello {this.props.name}</Text>);}
}class Blink extends Component {constructor(props){super(props);this.state = {isShowing: true};setInterval(() => {this.setState(previousState => {return {isShowing: !previousState.isShowing};});},1000);}render() {let display = this.state.isShowing? this.props.text : 'chenyu';return(<Text>{display}</Text>);}
}
export default class App extends Component<Props> {componentWillMount(){  //监听事件名为EventName的事件DeviceEventEmitter.addListener('EventName', function() {  alert("Android send js msg ");  });                                }constructor(props){super(props);this.state={myName:'chenzixuan',num:0,isShowingText:true}// 每1000毫秒对showText状态做一次取反操作setInterval(() => {this.setState(previousState => {return {num: ++this.state.num};});}, 1000);}render() {let pic = {uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'};        return (<View style={styles.container}><Text onPress={()=> this._androidShowMsg()} style={styles.welcome}>Welcome to React Native!</Text><Text style={styles.red}>To get started, edit App.js</Text><Text style={styles.bigblue}>{instructions}</Text><Text style={styles.instructions}>{this.state.myName}</Text><Text style={styles.instructions}>{this.state.num}</Text><Greet name = 'chenyu'></Greet><Blink text = 'chenzixuan'></Blink></View>);}_androidShowMsg = () => {var value = myAndroidToast.showMyName();this.setState({myName:value});};
}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,},bigblue: {color: 'blue',fontWeight: 'bold',fontSize: 39},red: {color: 'red' },
});

2 运行结果如下

React Native之Props(属性)和State(状态)和简单样式简单使用相关推荐

React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
React Native中pointerEvent属性
在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...
给所有开发者的React Native详细入门指南
本文为 Marno 原创,转载必须保留出处! 公众号[ aMarno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 建议先下载好 ...
React Native知识
http://www.cnblogs.com/wujy/tag/React%20Native/ React Native知识12-与原生交互 React Native知识11-Props(属性)与S ...
React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
React Native专题-江
(一).基本介绍: 江博客http://blog.csdn.net/jiangqq781931404/article/category/6055594 React Native For Android ...
React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
React Native for Android 实践 — 实现知乎日报客户端
React Native for Android 的发布,对一个 Android 开发者来说还是有相当的吸引力的.通过前面这篇博客:React Native for Android 入门老虎好不容易入 ...

React Native之Props(属性)和State(状态)和简单样式简单使用

1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下

2 运行结果如下

React Native之Props(属性)和State(状态)和简单样式简单使用相关推荐

最新文章

热门文章