react-native 再偿之
进入正题项目结构图 如何导出和导入使用一个ReactNative组件?新建一个组件 HelloWordComponent.js import React,{Component} from 'react';
import {
Text,} from 'react-native';
export default class HelloWordComponent extends Component<Props> {
render() {
return (
<Text style={{fontSize: 40,backgroundColor: 'red'}}>
哈喽 帅哥 !
</Text>
);
}
}
对于组件来说,导出的规则就是:Class代码中以两个单词 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,{Component} from 'react';
import {
Platform,StyleSheet,View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'
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> {
render() {
return (
<View style={styles.container}>
<HelloWordComponent/>
</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,});
其中有一行代码是这样写的 export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<HelloWordComponent/>
</View>
);
}
}
如何导出和导入使用一个变量或者常量?新建一个组件EIComponent.js import React,{Component} from 'react';
import {
Text,View
} from 'react-native';
var name = '小明';
var age = '20';
export {name,age};
export default class EIComponent extends Component<Props> {
constructor(props) {
super(props);
this.state = {count: 0,}
}
render() {
return (
<View>
<Text style={{fontSize: 40,backgroundColor: 'red'}}
onPress={() => {
this.setState({
count: this.state.count + 1,})
}}>
点击我累计吻{this.props.name}次
</Text>
<Text style={{fontSize: 50}}>一共吻了{this.state.count}次</Text>
</View>
);
}
}
代码中可以很容易的发现 var name = '小明';
var age = '20';
export {name,age};
就是变量的定义和导出的方式!怎么引用呢?还是在app.js中 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,Text,View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'
import EIComponent,{name,age} from './EIComponent'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<HelloWordComponent/>
<Text style={{fontSize: 30}}>姓名:{name}</Text>
<Text style={{fontSize: 30}}>芳龄:{age}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,});
其中有一行代码是这样写的 export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<HelloWordComponent/>
<Text style={{fontSize: 30}}>姓名:{name}</Text>
<Text style={{fontSize: 30}}>芳龄:{age}</Text>
</View>
);
}
}
如何导出和导入使用一个方法?方法导出和导出变量一样简单,直接在加入代码 export function sum(a = 3,b = 6) {
return a + b;
}
即 import React,age};
export function sum(a = 3,b = 6) {
return a + b;
}
export default class EIComponent extends Component<Props> {
constructor(props) {
super(props);
this.state = {count: 0,})
}}>
点击我累计吻{this.props.name}次
</Text>
<Text style={{fontSize: 50}}>一共吻了{this.state.count}次</Text>
</View>
);
}
}
表示方法导入(可在此 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,sum} from './EIComponent'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<HelloWordComponent/>
<Text style={{fontSize: 30}}>姓名:{name}</Text>
<Text style={{fontSize: 30}}>芳龄:{age}</Text>
<Text style={{fontSize: 30}}>输入4,8计算结果={sum(4,8)}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,});
如何使用??,在 export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <HelloWordComponent/> <Text style={{fontSize: 30}}>姓名:{name}</Text> <Text style={{fontSize: 30}}>芳龄:{age}</Text> <Text style={{fontSize: 30}}>输入4,8计算结果={sum(4,8)}</Text> </View> ); } }
ReactNative组件有生命周期吗?怎么调用的呢?ReactNative组件是有自己的生命周期的,而且和我们的Android的四大组件之一的Activity是不是有些类似呢?!她的生命周期主要分三大块: 然后我呢,就新建一个组件LifeCycleComponent.js来打印下她的生命周期到底是怎么运作的! import React,{Component} from 'react';
import {
Text,View
} from 'react-native';
export default class LifeCycleComponent extends Component<Props> {
constructor(props) {
super(props);
console.log('<<<<<<<<<-----constructor---->>>>>>>>>>>')
this.state = {count: 0,}
}
componentWillMount() {
console.log('<<<<<<<<<-----componentWillMount---->>>>>>>>>>>')
}
componentDidMount() {
console.log('<<<<<<<<<-----componentDidMount---->>>>>>>>>>>')
}
componentWillReceiveProps(nextProps) {
console.log('<<<<<<<<<-----componentWillReceiveProps---->>>>>>>>>>>')
}
shouldComponentUpdate(nextProps,nextState) {
console.log('<<<<<<<<<-----shouldComponentUpdate---->>>>>>>>>>>')
return true;
}
componentWillUpdate(nextProps,nextState) {
console.log('<<<<<<<<<-----componentWillUpdate---->>>>>>>>>>>')
}
componentDidUpdate(preProps,preState) {
console.log('<<<<<<<<<-----componentDidUpdate---->>>>>>>>>>>')
}
componentWillUnmount() {
console.log('<<<<<<<<<-----componentWillUnmount---->>>>>>>>>>>')
}
render() {
console.log('<<<<<<<<<-----render---->>>>>>>>>>>')
return (
<View>
<Text style={{fontSize: 40,backgroundColor: 'blue'}}>这里在进行很严肃的ReactNative组件的生命周期测试</Text><Text style={{fontSize: 40,backgroundColor: 'blue'}}
onPress={() => {
this.setState({
count: this.state.count + 1,})
}}
>这里在进行很严肃的ReactNative组件的生命周期测试</Text>
</View>
);
}
}
然后导入到app.js中并使用 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,sum} from './EIComponent'
import LifeCycleComponent from './LifeCycleComponent'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,8)}</Text>
<LifeCycleComponent/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,});
这里先中断一下,叙述一下ReactNative的 摇晃手机弹出对话框,红色框这个说明我已经开启了远程调试功能。如果么有开启,则点击开启就行,然后会在你的浏览器中打开一个页面,如下 在未点击手机的返回键退出该 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */
import React,View
} from 'react-native';
import HelloWordComponent from './HelloWordComponent'
import LifeCycleComponent from './LifeCycleComponent'
import EIComponent,});
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = ({remove: false})
}
render() {
var viewComponent = this.state.remove ? null : <LifeCycleComponent/>;
var text = this.state.remove ? '插入组件' : '拔出组件';
return (
<View style={styles.container}>
<HelloWordComponent/>
<Text style={{fontSize: 30}}>姓名:{name}</Text>
<Text style={{fontSize: 30}}>芳龄:{age}</Text>
<Text style={{fontSize: 30}}>输入4,8计算结果={sum(4,8)}</Text>
<Text style={{fontSize: 40}} onPress={() => {
this.setState({remove: !this.state.remove})
}}>{text}</Text>
{viewComponent}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,});
import React,View
} from 'react-native';
export default class LifeCycleComponent extends Component<Props> {
constructor(props) {
super(props);
console.log('<<<<<<<<<-----constructor---->>>>>>>>>>>')
}
componentWillMount() {
console.log('<<<<<<<<<-----componentWillMount---->>>>>>>>>>>')
}
componentDidMount() {
console.log('<<<<<<<<<-----componentDidMount---->>>>>>>>>>>')
}
componentWillReceiveProps(nextProps) {
console.log('<<<<<<<<<-----componentWillReceiveProps---->>>>>>>>>>>')
}
shouldComponentUpdate(nextProps,backgroundColor: 'blue'}}
>这里在进行很严肃的ReactNative组件的生命周期测试</Text>
</View>
);
}
}
通过点击 通过点击 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |