react native 布局头像标题简介

       阅读(550)  2017-02-14 18:03:49

import React from 'react';
import {
  registerComponent,
} from 'react-native-playground';
import {
  StatusBar,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

class ItemBox extends React.Component {
  render() {
    return (
      <View style={styles.itemBox}>
        <Image
          style={styles.logo}
          source={{uri: this.props.uri}}
        />
        <View style={styles.right}>
          <Text style={styles.title}>
      				{this.props.title}
          </Text>
          <Text style={styles.content}>
      				{this.props.content}
          </Text>
        </View>
      </View>
    )
  }
}

class App extends React.Component {
  render() {
    const uri = 'http://facebook.github.io/react/img/logo_og.png'
    const title = '这是一个标题啊'
    const content = '这是文章的简介这是文章的简介这是文章的简介'
    return (
      <View style={styles.container}>
      	<ItemBox uri={uri} title={title} content={content} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 25,
  },
  itemBox: {
    flexDirection: 'row',
    height: 100,
    padding: 10,
    backgroundColor: '#eee',
  },
  logo: {
		width: 80,
   height: 80,
   borderRadius: 40,
  },
  right: {
    flexDirection: 'column',
    justifyContent: 'space-around',
    margin: 10,
  },
  title: {
  	fontSize: 20,
   color: '#000',
	},
  content: {
   fontSize: 16,
   color: '#f00',
  },
});

registerComponent(App);

文章评论

Keep it simple,stupid
文章数
284
总访问量
263214
今日访问
127
最近评论

ningto : 请到next.ningto.com里发表评论。
tujiaw : 抱歉csdn code服务关闭了,这个代码我也找不到了
于淞 : 你好,这个文章的源码能分享一下吗,songsong9181@163.com,谢谢了 上面的写错了
于淞 : 你好,这个文章的源码能分享一下吗,838106303@163.com,谢谢了 上面的链接不能用了
tujiaw : 多谢多谢
essaypinglun college-paper.org : 很好的博客,赞赞
Folly : 这个实现有点奇怪,Qt为什么没有统一的比对方法。
过多s : alert("hello, world!")
tujiaw : 还不错哦
回到顶部