React-Native学习笔记

笔记内容是结合下面定义的组件中结合说明：

import React, {Component} from 'react';
import {StyleSheet, Text, View, TabBarIOS} from 'react-native';
class LWMain extends Component{
    constructor(props) {
      super(props);
      this.state = {
          selectedItem:'home'
      };
    }
     render(){
         return(
             //组件
         )
     }
}
const styles = StyleSheet.create({
    container:{
        flex:1
    }
});
module.exports = LWMain;

1.自定义TabBarIOS图标，解决图标显示不正常的问题

    <TabBarIOS
                tintColor={'orange'}
            >
                <TabBarIOS.Item
                    {/*scale：缩放，解决图标显示过大的问题*/}
                    icon={{uri:'tabbar_home',scale:1.5}}
                    title={'首页'}
                    selected={this.state.selectedItem == 'home'}
                    onPress={()=>{this.setState({selectedItem:'home'})}}
                >
                <View style={styles.container}></View>
                </TabBarIOS.Item>

                <TabBarIOS.Item
                     {/*scale：缩放，解决图标显示过大的问题*/}
                    icon={{uri:'tabbar_discover',scale:1.5}}
                    title={'发现'}
                    selected={this.state.selectedItem == 'find'}
                    onPress={()=>{this.setState({selectedItem:'find'})}}
                >
                    <View style={styles.container}></View>
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    {/*scale：缩放，解决图标显示过大的问题*/}
                    icon={{uri:'tabbar_profile',scale:1.5}}
                    title={'我的'}
                    selected={this.state.selectedItem == 'mine'}
                    onPress={()=>{this.setState({selectedItem:'mine'})}}
                >
                    <View style={styles.container}></View>
                </TabBarIOS.Item>
            </TabBarIOS>