<p style="text-align: left">要做的效果很简单，如下图所示：
<p style="text-align: center">
使用基本教程
1.引入组件
nofollow" target="_blank" href="https://github.com/happypancake/react-native-tab-navigator">Github上的地址
2.render方法中返回：
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '电影' })}>
// 这里放入页面组件
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '音乐' })}>
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '图书' })}>
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '我的' })}>
);
}
引入页面组件：
设置state状态机：
引入基本样式：
这个时候效果已经出来了，我们继续抽象组件：
将每一个栏目抽出来放到一个统一的方法中：
}
renderSelectedIcon={() =>
}
onPress={() => this.setState({ selectedTab: selectedTab })}
>
)
}
此时，render方法中就直接引用四个方法即可：
{this._renderTabarItems('电影',require('../img/movie_gray.png'),require('../img/movie_red.png'),MoviePage)}
{this._renderTabarItems('音乐',require('../img/music_gray.png'),require('../img/music_red.png'),MusicPage)}
{this._renderTabarItems('图书',require('../img/book_gray.png'),require('../img/book_red.png'),BookPage)}
{this._renderTabarItems('我的',require('../img/my_gray.png'),require('../img/my_red.png'),MyPage)}
);
}
至此，已经初步完成。
组件的属性集合：
Props
TabNavigator props
prop
| default |
type |
description |
属性应该用处不大效果
TabNavigator.Item props
prop
| default |
type |
description |
提示文字，可为String或Number，类似QQ中Tab右上角的消息提示，非必填提示角标渲染方式，function类型，类似render的使用，非必填标题，String类型，非必填标题样式，style类型，非必填标题样式，style类型，非必填函数，这里需要控制的是state
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/36585.html
