Hello!

程序员给自己留条后路

亲爱的朋友

专业挖坑

前段开发 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,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    '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: { width: 25, height: 25, } });

 

posted @ 2018-09-08 16:27  湾子大郊亭  阅读(172)  评论(0编辑  收藏  举报