Let's take a look at the basics of using React Native's Image component, as well as adding some reusable styling to our Dashboard component buttons.

We are going to build Dashboard Component, it will looks like this:

Basicly have one image component and three TouchableHighlight components.

import React, { Component } from 'react';
import {Text, View, StyleSheet, Image, TouchableHighlight} from 'react-native'; var styles = StyleSheet.create({
container: {
marginTop: ,
flex:
},
image: {
height: ,
},
buttonText: {
fontSize: ,
color: 'white',
alignSelf: 'center'
}
}); class Dashboard extends React.Component{
makeBackground(btn){
var obj = {
flexDirection: 'row',
alignSelf: 'stretch',
justifyContent: 'center',
flex:
}
if(btn === ){
obj.backgroundColor = '#48BBEC';
} else if (btn === ){
obj.backgroundColor = '#E77AAE';
} else {
obj.backgroundColor = '#758BF4';
}
return obj;
}
goToProfile(){
console.log('Going to Profile Page');
}
goToRepos(){
console.log('Going to Repos');
}
goToNotes(){
console.log('Going to Notes');
}
render(){
return (
<View style={styles.container}>
<Image source={{uri: this.props.userInfo.avatar_url}} style={styles.image}/>
<TouchableHighlight
style={this.makeBackground()}
onPress={this.goToProfile.bind(this)}
underlayColor="#88D4F5">
<Text style={styles.buttonText}>View Profile</Text>
</TouchableHighlight>
<TouchableHighlight
style={this.makeBackground()}
onPress={this.goToRepos.bind(this)}
underlayColor="#E39EBF">
<Text style={styles.buttonText}>View Repositories</Text>
</TouchableHighlight>
<TouchableHighlight
style={this.makeBackground()}
onPress={this.goToNotes.bind(this)}
underlayColor="#9BAAF3">
<Text style={styles.buttonText}>Take Notes</Text>
</TouchableHighlight>
</View>
)
}
}; module.exports = Dashboard;

The data 'this.props.userInfo' was passed from 'navigator' in main.js:

    handleSubmit(event){
//update our indicatorIOS spinner
this.setState({
isLoading: true
});
//fetch data from github
api.getBio(this.state.username)
.then( (res) => {
if(res.message === "Not Found"){
this.setState({
error: 'User not found',
isLoading: false
})
}else{
//Pass in a new router component
this.props.navigator.push({
title: res.name || 'Selet an Option',
component: Dashboard,
passProps: {userInfo: res}
});
//Clean the search input and loading
this.setState({
isLoading: false,
error: false,
username: ''
});
}
})
}

[React Native] Using the Image component and reusable styles的更多相关文章

  1. [React Native] Using the WebView component

    We can access web pages in our React Native application using the WebView component. We will connect ...

  2. React Native(六)——PureComponent VS Component

    先看两段代码: export class ywg extends PureComponent { …… render() { return ( …… ); } } export class ywg e ...

  3. [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

    In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...

  4. [react native] react-native-tab-navigator在子Component中隐藏

    因为文档只列出了TabBarIOS, 不支持Android,所以github上找到这个组件. 先说下我的页面构造:  入口文件 —> 注册组件(包含Navigator, 跳转到欢迎页)—> ...

  5. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  6. React Native移植原生Android

    (一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...

  7. React Native开发 - 搭建React Native开发环境

    移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...

  8. React Native 系列(二)

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  9. React Native入门 开发第一个React Native应用

    1. 首先创建一个目录(比如ReactNativeDir),用于存放各个ReactNative工程的代码 2.使用React Native命令工具来创建(初始化)一个ReactNative项目(tes ...

随机推荐

  1. jsoi2015 R2——滚粗记

    考完感觉各种绝望溢出胸口,作为百度空间的最后一篇文章了吧 day 0 第二轮在南师附中……不能到外地玩了…… 其实在试机的时候就感觉不大对头,明明说好18:15试机结果拖到18:30…… 还有今年竟然 ...

  2. 自定义web浏览器(五)

    万维网(Web)服务的客户端浏览程序.可向万维网(Web)服务器发送各种请求,并对从服务器发来的超文本信息和各种 多媒体数据格式进行解释.显示和播放--------百度百科对浏览器给出这样的解释.

  3. Android Material Design简单使用

    吐槽 作为一个 Android developer,没有什么比拿着 UI 设计的一堆 iOS 风格的设计 来做需求更恶心的了,基本所有空间都要照着 iOS 来画一遍,Material Design 辣 ...

  4. ECSHOP:首页实现显示子分类商品,并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  5. 也用 Log4Net 之将自定义属性记录到文件中 (三)

    也用 Log4Net  之将自定义属性记录到文件中 (三)  即解决了将自定义属性记录到数据库之后.一个新的想法冒了出来,自定义属性同样也能记录到文件中吗?答案是肯定的,因为Log4Net既然已经考虑 ...

  6. Ext入门学习系列(五)表格控件(1)

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  7. 使用VSS2005的时候报错:输入正确的服务器地址依然出错了

    使用VSS2005的时候报错:输入正确的服务器地址依然出错了 使用VSS2005的时候报错: 在安装完vss客户端,进入vss服务器的时候,需要vss服务器的ip和数据库名称.以及初始化文件, 我在进 ...

  8. 算法 后减前最大值,zt

    一个人知道未来n天的每天股票的价格,请你给出一个算法,使得这个人从哪天买入,哪天卖出能获得最大的收益. 问题实际上就是求一个数组后面元素减前面元素的最大值 #include <stdio.h&g ...

  9. delphi 数据导出到word

    procedure TFrmWeekAnalysisQry.BtnExportToExcelClick(Sender: TObject);var wordApp,WordDoc,WrdSelectio ...

  10. DELPHI 中的Delay函数,利用GetTickCount和Application.ProcessMessages构建

      作者 关劲松           delphi 开发中有些时候需要停留片刻,等待界面输入,或异步操作完成,如果使用sleep函数的话,整个程序都会停顿,界面还会出现冻结的情况.因此需要自行编写一个 ...