React Native学习笔记

，最近刚开始学习RN，用这个做下笔记。

---

引用组件首字母必须要大写，不然就会造成错误 Expected a component class,got[object Object]。

---

react-native-vector-icons用法
下载：
npm install react-native-vector-icons –save
react-native link react-native-vector-icons

代码里使用
import Icon from ‘react-native-vector-icons/XXX’;

<Icon name={'md-home'}size={30}color={selected ? '#3e9ce9' : '#000000'}/>

---

react-native-tab-navigator的使用
下载：npm install react-native-tab-navigator –save

简单的一个demo，使用react-native-vector-icons中的图标，需要注意的是每个Item必须要返回一个视图，不然会报错。

import React, {Component} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
//导入react-native-tab-navigator方式：
//cmd项目路径下执行npm install react-native-tab-navigator --save
import TabNavigator from 'react-native-tab-navigator'
import Icon from 'react-native-vector-icons/FontAwesome'
export default class Tabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        //设置选中的位置
                        selected={this.state.selectedTab === 'Home'}
                        //标题
                        title="首页"
                        //标题样式
                        titleStyle={styles.tabText}
                        //选中时标题文字样式
                        selectedTitleStyle={styles.selectedTabText}
                        //图标
                        renderIcon={() => <Icon name={'home'} size={30} color={this.state.selectedTab === 'Home' ? '#3e9ce9' : '#000000'} />}
                        //选中时图标
                        renderSelectedIcon={() => <Icon name={'home'} size={30} color={this.state.selectedTab === 'Home' ? '#3e9ce9' : '#000000'} />}
                        //点击Event
                        onPress={() => this.setState({ selectedTab: 'Home' })}>
                        <View style={styles.page0}>
                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Home Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'List'}
                        title="订单"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name={'list'} size={25} color={this.state.selectedTab === 'List' ? '#3e9ce9' : '#000000'} />}
                        renderSelectedIcon={() =>  <Icon name={'list'} size={25} color={this.state.selectedTab === 'List' ? '#3e9ce9' : '#000000'} />}
                        onPress={() => this.setState({ selectedTab: 'List' })}>
                        <View style={styles.page0}>
                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is List Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Friend'}
                        title="朋友"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name={'address-book'} size={25} color={this.state.selectedTab === 'Friend' ? '#3e9ce9' : '#000000'} />}
                        renderSelectedIcon={() => <Icon name={'address-book'} size={25} color={this.state.selectedTab === 'Friend' ? '#3e9ce9' : '#000000'} />}
                        onPress={() => this.setState({ selectedTab: 'Friend' })}>
                        <View style={styles.page1}>
                            <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is Friend Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'User'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name={'user'} size={27} color={this.state.selectedTab === 'User' ? '#3e9ce9' : '#000000'} />}
                        renderSelectedIcon={() => <Icon name={'user'} size={27} color={this.state.selectedTab === 'User' ? '#3e9ce9' : '#000000'} />}
                        onPress={() => this.setState({ selectedTab: 'User' })}>
                        <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
    },
    tabText: {
        fontSize: 10,
        color: '#000000'
    },
    selectedTabText: {
        fontSize: 10,
        color: '#3e9ce9'
    },
    icon: {
        width: 22,
        height: 22
    },
    page0: {
        flex: 1,
        backgroundColor: 'yellow'
    },
    page1: {
        flex: 1,
        backgroundColor: 'blue'
    }
});

---

react-native-viewpager（图片轮播）的使用
安装：npm install react-native-viewpager –save

使用看Github上的示例：https://github.com/race604/react-native-viewpager

这里遇到两个问题，具体见下图:

第一个是当设置图片显示在页面上方指定高度时，页面滚动指示器的位置不会自动显示在图片下方，而是在页面的最下方。第二个问题是选中的小圆点和没选中的小圆点不在一个水平线上，解决方法是修改react-native-viewpager的源码，具体代码如下:
第一个问题修改ViewPager.js文件,修改过后的代码如下:

第二个问题修改DefaultViewPageIndicator.js文件

curDot: {
    position: 'absolute',
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: '#80ACD0',
    margin: DOT_SAPCE,
    bottom: -4,//原来的值是0
  },

最后上效果图: