react-native-tab-navigator

来源：互联网发布：水仙花数java代码编辑：程序博客网时间：2024/06/04 20:00
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  Image} from 'react-native';import TabNavigator from 'react-native-tab-navigator';export default class D20170510 extends Component {    constructor(props){        super(props);        this.state = {           defaultSelected:'1'        }    }  render() {    return (        <TabNavigator            sceneStyle={{                backgroundColor:'green'            }}            tabBarStyle={{                backgroundColor:'pink'            }}            tabBarShadowStyle={{                backgroundColor:'green'            }}            hidesTabTouch={true}            >            <TabNavigator.Item                allowFontScaling={false}                tabStyle={{                    backgroundColor:'blue'                }}                titleStyle={{                    color:'red',                    paddingBottom:10                }}                selectedTitleStyle={{                    color:'green',                    paddingBottom:0                }}                badgeText={2}                renderBadge={() => {                    return (                        <Text style={{                                backgroundColor:'red',                            }}>{'666'}</Text>                    );                }}                renderIcon={() => {                    return (                        <Image                            source={require("./img/未标题-1.png")}                            style={{                                height:26,                                width:26                            }}                            />                    );                }}                renderSelectedIcon={() => {                    return (                        <Image                            source={require("./img/未标题-2.png")}                            style={{                                height:26,                                width:26                            }}                            />                    );                }}                selected={this.state.defaultSelected == 1}                title={'第一个'}                onPress={() => {                    this.setState({                        defaultSelected:1                    });                }}                >                {<Main1/>}            </TabNavigator.Item>            <TabNavigator.Item                selected={this.state.defaultSelected == 2}                title={'第二个'}                onPress={() => {                    this.setState({                        defaultSelected:2                    });                }}                >                {<Main2/>}            </TabNavigator.Item>            <TabNavigator.Item                selected={this.state.defaultSelected == 3}                title={'第三个'}                onPress={() => {                    this.setState({                        defaultSelected:3                    });                }}                >                {<Main3/>}            </TabNavigator.Item>        </TabNavigator>    );  }}class Main1 extends Component {    render (){        return (            <View style={styles.container}>                <Text>{'main1'}</Text>            </View>        );    }}class Main2 extends Component {    render (){        return (            <View style={styles.container}>                <Text>{'main2'}</Text>            </View>        );    }}class Main3 extends Component {    render (){        return (            <View style={styles.container}>                <Text>{'main3'}</Text>            </View>        );    }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor:'#fff'  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('D20170510', () => D20170510);
0 0