react-native仿Android底部table(过时的了)

来源：互联网发布：网络电视如何看3d电影编辑：程序博客网时间：2024/06/04 01:12

react-native仿Android底部table

使用步骤

1.添加库开始我使用的npm install react-native-tab-navigator –save 文件是加载进来了，但是一直报错

yarn add react-native-tab-navigator

2.使用，使用方式很简单，按以下模板就行

import React from 'react';// 引入布局Viewimport { StyleSheet, View, Text, Image } from 'react-native';import TabNavigator from 'react-native-tab-navigator';export default class MainHome extends React.Component {    constructor(props) {        super(props);        this.state = {            selectedTab: 'Android'        }    }    render() {        return (            <View style={styles.container}>                <TabNavigator>                    <TabNavigator.Item                        //设置选中的位置                        selected={this.state.selectedTab === 'Android'}                        //标题                        title="Android"                        //标题样式                        titleStyle={styles.tabText}                        //选中时标题文字样式                        selectedTitleStyle={styles.selectedTabText}                        //图标                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/android.png")} />}                        //选中时图标                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/android_select.png")} />}                        //点击Event                        onPress={() => this.setState({ selectedTab: 'Android' })}>                        <View style={styles.page0}>                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Event Page</Text>                        </View>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab === 'Img'}                        title="Img"                        titleStyle={styles.tabText}                        selectedTitleStyle={styles.selectedTabText}                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/img.png")} />}                        renderSelectedIcon={() =>  <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/img_select.png")} />}                        onPress={() => this.setState({ selectedTab: 'Img' })}>                        <View style={styles.page0}>                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Log Page</Text>                        </View>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab === 'Ios'}                        title="Ios"                        titleStyle={styles.tabText}                        selectedTitleStyle={styles.selectedTabText}                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/ios.png")} />}                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/ios_select.png")} />}                        onPress={() => this.setState({ selectedTab: 'Ios' })}>                        <View style={styles.page1}>                            <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is Device Page</Text>                        </View>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab === 'All'}                        title="All"                        titleStyle={styles.tabText}                        selectedTitleStyle={styles.selectedTabText}                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/all.png")} />}                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/all_select.png")} />}                        onPress={() => this.setState({ selectedTab: 'All' })}>                        <View style={styles.page1}>                            <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is User Page</Text>                        </View>                    </TabNavigator.Item>                </TabNavigator>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#e8ffce'    },    tabText: {        fontSize: 10,        color: 'black'    },    selectedTabText: {        fontSize: 10,        color: 'red'    },    icon: {        width: 22,        height: 22    },    page0: {        flex: 1,        backgroundColor: 'yellow'    },    page1: {        flex: 1,        backgroundColor: 'blue'    }});

item中的view可以使用导入的方式让代码更加简洁

阅读全文

0 0