zoukankan      html  css  js  c++  java
  • 前段开发 react native tab功能

    import React, { Component } from 'react';
    import {
    
      StyleSheet,
      Text,
      View,
      Image,
    
    } from 'react-native';
    import TabNavigator from 'react-native-tab-navigator'
    
    import { Platform } from 'react-native'
    
    //这里 是四个底部tab 切换页面
    import Home from './src/assembly/myhome'
    import Newrn from './src/assembly/publicrn'
    import News from "./src/assembly/news";
    import About from "./src/assembly/about";
    import My from "./src/assembly/my";
    //判断安卓手机还是iOS手机
    // let paddingTop = 10;
    if (Platform.OS === 'android') {
        // alert(1)
    }else{
       // paddingTop = 400;
    }
    
    
    
    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,
    ' +
        'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,
    ' +
        'Shake or press menu button for dev menu',
    });
    
    type Props = {};
    export default class App extends Component<Props> {
    
    
      constructor(props){
        super(props);
        this.state = {
            selectedTab: '首页'
        }
      }
    
    
    
    
      render() {
        return (
        //判断安卓 iOS 屏幕上面兼容20像素
    <View style={[styles.android,Platform.OS == 'ios' ? styles.ios :Platform.OS == 'android']}> <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '11'} title="首页" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require(".png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />} onPress={() => this.setState({ selectedTab: '11' })}> <View> <Home></Home> </View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '22'} title="22" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require(".png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />} onPress={() => this.setState({ selectedTab: '11' })}> <View> <News></News> </View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '33'} title="33" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require(".png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />} onPress={() => this.setState({ selectedTab: '33' })}> <View> <My></My> </View> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '44'} title="44" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require(".png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />} onPress={() => this.setState({ selectedTab: '44' })}> <View> <About></About> </View> </TabNavigator.Item> </TabNavigator> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor:'#ccc', // paddingTop: paddingTop }, android: { flex: 1, backgroundColor:'green', }, ios:{ flex: 1, backgroundColor:'#fff', marginTop:21 }, tabText: { color: "#666666", fontSize: 13 }, selectedTabText: { color: "#ff8a00", fontSize: 13 }, icon: { 25, height: 25, } });
  • 相关阅读:
    我已经迷失在事件环(eventloop)中了【Nodejs篇】
    canvas练手项目(二)——各种操作基础
    canvas练手项目(三)——Canvas中的Text文本
    canvas练手项目(一)——选取图片
    迭代器,生成器(generator)和Promise的“微妙”关系
    通过HTTP的HEADER完成各种骚操作
    这份Koa的简易Router手敲指南请收下
    KOA的简易模板引擎实现方式
    扒一扒PROMISE的原理,大家不要怕!
    参考KOA,5步手写一款粗糙的web框架
  • 原文地址:https://www.cnblogs.com/chen527/p/9609539.html
Copyright © 2011-2022 走看看