react-native-tab-navigator底部导航

github地址：https://github.com/exponentjs/react-native-tab-navigator
终端运行：npm install react-native-tab-navigator –save下载
项目中导入
import TabNavigator from 'react-native-tab-navigator';
在render方法当中使用它：

render() {
        return (
            <View style={styles.container} >
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_home_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_home_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '消息'}
                        title="消息"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_message_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_message_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '消息' })}>
                        <MessageComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '联系人'}
                        title="联系人"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '联系人' })}>
                        <ContactComponent />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }

其中可以自定义选中与未选中text和图标的样式，是不是很方便。
HomeComponent， MessageComponent，ContactComponent为子页面，也要先import
5. styles：

let styles = StyleSheet.create({
    container: {
        flex: 1
    },tabText: {
        color: "#000000",fontSize: 13
    },selectedTabText: {
        color: "#999999",icon: {
        width: 20,height: 20
    }
});

6. 设置默认页：

	constructor(props){
		super(props);
		this.state={
			selectedTab:'首页',//默认页面为“首页”
		}
 
	}

react-native-tab-navigator底部导航

猜你在找的React相关文章