////用组件化写的
import React, { Component } from "react";
import { Text, View } from "react-native";
import Greeting1 from "./Greeting.js";
class Greeting extends Component {
render() {
let { foo, bar } = { foo: "aaa", bar: "bbb" };
console.log(foo);
console.warn(this.props.name)
console.log(' this is a big date')
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
export default class App extends Component {
_log(log){
console.warn(log);
return null;
}
render() {
console.warn("main begin");
return (
<View style={{ alignItems: "center" }}>
<Greeting name="Rexxar" />
<Greeting1 name="Jaina" />
<Greeting name="Valeera" />
{this._log("0000")}
</View>
);
}
}
// Greeting.js 文件
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import PropTypes from 'prop-types'
export default class Greeting extends React.Component {
render() {
console.warn(this.props.name);
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
上面的Demo 就是父组件调用子组件,如果不用组件形式写,放在一个文件里,代码如下所示:
//不用组件化的形式写的
//app.js 文件里
import React, { Component } from 'react';
import { Text, View } from 'react-native';
//组件化形式是这么写
class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
export default class LotsOfGreetings extends Component {
_renderCellView(name){
return (
<View style={{alignItems: 'center'}}>
<Text>Hello {name}!</Text>
</View>
);
}
render() {
return (
<View style={{alignItems: 'center'}}>
{this._renderCellView("RXjava")}
{this._renderCellView("RNIOS")}
{this._renderCellView("RNandroid")}
</View>
);
}
}