仿逛丢Laucher

首先这个页面大的View flex:1 flexDirection:’column’ justifyContent 需要是最下部，flex-end对齐,alignItems 水平对齐 ,左边的逛丢是绿色，大写，粗体中间的竖线是一个View width1 borderWidth:1 borderColor:gray 右边是先一个View 包含Text 这个View的justifyContent 和alignItem都得是flex-end

import React,{ Component } from 'React';
import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import { StackNavigator } from 'react-navigation';

import Login from './Login';


class LaucherA extends Component{
    static navigationOptions = {
        tabBarVisible: false, // 隐藏底部导航栏
        header:null,  //隐藏顶部导航栏
    };

    render(){
        return(
            <View style={styles.container}>
                <View style={styles.containerBottom}>
                    <Text style={styles.textLeftStyle}>
                        万众科技
                    </Text>
                    <View style={styles.spliderStyle}></View>
                    <View style={styles.rightViewStyle}>
                        <Text style={styles.textRightStyle}>
                            万联网领导者
                        </Text>
                    </View>

                </View>

            </View>
        )
    }

    componentDidMount(){
        setTimeout( ()=> this.props.navigation.replace('WzLogin'),500);
    }
}

const RockStack = StackNavigator(
    {
        WzLaucher:LaucherA,
        WzLogin:Login,
    },
    {
        initialRouteName:'WzLaucher'
    }
);

export default class Laucher extends Component{

    render(){
        return(
            <RockStack/>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'flex-end',
        alignItems: 'center',
        backgroundColor:'#F5FCFF'
    },
    containerBottom:{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        height:44,
        marginBottom: 30
    },
    spliderStyle:{
        width:1,
        height: 32,
        borderWidth:0.5,
        borderColor:'gray',
        marginLeft: 10
    },
    textLeftStyle:{
        fontSize:24,
        color:'rgba(0,250,154,0.8)',
        fontWeight: '900'
    },
    rightViewStyle:{
        marginLeft: 10,
        justifyContent:'flex-end',
        alignItems: 'flex-end',
        height:42
    },
    textRightStyle:{
        fontSize: 12,
    }
});

猜你喜欢