zoukankan      html  css  js  c++  java
  • [React Native] Using the Image component and reusable styles

    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: 65,
            flex: 1
        },
        image: {
            height: 350,
        },
        buttonText: {
            fontSize: 24,
            color: 'white',
            alignSelf: 'center'
        }
    });
    
    class Dashboard extends React.Component{
        makeBackground(btn){
            var obj = {
                flexDirection: 'row',
                alignSelf: 'stretch',
                justifyContent: 'center',
                flex: 1
            }
            if(btn === 0){
                obj.backgroundColor = '#48BBEC';
            } else if (btn === 1){
                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(0)}
                        onPress={this.goToProfile.bind(this)}
                        underlayColor="#88D4F5">
                        <Text style={styles.buttonText}>View Profile</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        style={this.makeBackground(1)}
                        onPress={this.goToRepos.bind(this)}
                        underlayColor="#E39EBF">
                        <Text style={styles.buttonText}>View Repositories</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        style={this.makeBackground(2)}
                        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: ''
                        });
                    }
                })
        }
  • 相关阅读:
    Caffe2——C++ 预测(predict)Demo
    Effective C++ 条款06:若不想使用编译器自动生成的函数,就该明确拒绝
    Effective C++ 条款05:了解C++编写并调用哪些函数
    Effective C++ 条款04:确定对象被使用前已经先被初始化
    Effective C++ 条款03:尽可能使用const
    Effective C++ 条款02:尽量以const,enum,inline替换 #define
    使用队列(Queue)解决简单的并发问题
    关于C#中Queue的线程安全问题
    C#多线程编程
    跨线程访问控件的问题和编程方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713280.html
Copyright © 2011-2022 走看看