删除文章

确定要删除这篇文章吗?

取消
确定

react native 布局头像标题简介

     阅读(622)  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
文章数
292
总访问量
350294
今日访问
308
最近评论

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