|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
- import React, { Component } from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View,
- Image
- } from 'react-native';
- export default class myreact extends Component {
- render() {
- return (
- <View style={styles.container}>
- <Image style={styles.img} source={require('./logo.png')}/>
- <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#F5FCFF',
- justifyContent:'center',
- flexWrap: 'wrap',
- alignItems:'center'
- },
- img:{
- width:200,
- height:50
- }
- });
- AppRegistry.registerComponent('myreact', () => myreact);
复制代码
这就是插入图片的方法,把图片文件放进主项目目录里就行。另外text标签支持样式继承,在这里外层的字号大小被内层继承了。
效果图:
然后我们修改一下代码,把整个项目可以做成一个组件
- import React, { Component } from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View,
- Image
- } from 'react-native';
- function Pic(){
- return(
- <View style={styles.container}>
- <Image style={styles.img} source={require('./logo.png')}/>
- <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
- </View>
- )
- }
- export default class myreact extends Component {
- render() {
- return (
- <Pic/>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#F5FCFF',
- justifyContent:'center',
- flexWrap: 'wrap',
- alignItems:'center'
- },
- img:{
- width:200,
- height:50
- }
- });
- AppRegistry.registerComponent('myreact', () => myreact);
复制代码
这种方法叫做函数组件,优点是执行速度快,缺点是功能比较少,还有一种方法叫做类组件
- import React, { Component } from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View,
- Image
- } from 'react-native';
- class Pic extends React.Component{
- render(){
- return(
- <View style={styles.container}>
- <Image style={styles.img} source={require('./logo.png')}/>
- <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
- </View>
- )
- }
- }
- export default class myreact extends Component {
- render() {
- return (
- <Pic/>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#F5FCFF',
- justifyContent:'center',
- flexWrap: 'wrap',
- alignItems:'center'
- },
- img:{
- width:200,
- height:50
- }
- });
- AppRegistry.registerComponent('myreact', () => myreact);
复制代码
一般都用这种方法,而且要把组件放进另外一个文件里,方便管理,只在主文件调用就可以了,方法如下:
先创建一个文件比如test.js,然后把我们写的组件类cut进那个文件,在添些东西进去:
- import React, { Component } from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View,
- Image
- } from 'react-native';
- export default class Pic extends React.Component{
- render(){
- return(
- <View style={styles.container}>
- <Image style={styles.img} source={require('./logo.png')}/>
- <Text style={{fontSize:25}}>让编程改变<Text style={{color:'green'}}>世界</Text></Text>
- </View>
- )
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#F5FCFF',
- justifyContent:'center',
- flexWrap: 'wrap',
- alignItems:'center'
- },
- img:{
- borderRadius: 20,
- borderColor: 'red',
- borderWidth: 2,
- width:200,
- height:50
- }
- });
复制代码
要把头文件跟样式变量也得写在这文件里,我们刚才的源文件变为:
- import React, { Component } from 'react';
- import {
- AppRegistry,
-
- } from 'react-native';
- import Pic from './test.js'
- export default class myreact extends Component {
- render() {
- return (
- <Pic/>
- );
- }
- }
- AppRegistry.registerComponent('myreact', () => myreact);
复制代码
这样看起来就很规范了,我又加了些边角效果,效果图为:
|
评分
-
查看全部评分
|