新版本转场动画组件,用于自定义转场效果
import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator';
const TransitionConfiguration = () => ({
screenInterpolator: (sceneProps) => {
const {scene} = sceneProps;
const {route} = scene;
const params = route.params || {};
const transition = params.transition || 'forHorizontal';
return StackViewStyleInterpolator[transition](sceneProps);
}
});
每个tab页面可以有自己的导航堆栈,用于导航到某个tab的一个新页面,在需要固定tabs时尤其好用,比如我们需要一个tabs,在切换tab和页面间跳转时都固定在页面底部。创建一个用于非tab页面间导航的StackNavigator
:
const Nav = createStackNavigator(
{
Home: {
screen: home,
navigationOptions: {
header: null
}
},
Profile: {
screen: profile,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Home'
}
);
再创建一个BottomTabNavigator
,注意此时Home的组件是Nav:
const Tabs = createBottomTabNavigator(
{
Home: {
screen: Nav,
navigationOptions:{
title: '主页'
}
},
News: {
screen: news,
navigationOptions:{
title: '新闻'
}
},
Account: {
screen: account,
navigationOptions:{
title: '我的'
}
}
}
);
导出Tabs作为页面框架:
export default class myapp extends React.Component {
render() {
return <Tabs />;
}
}
轮播图插件
react-native-swiper
升级版
react-native-snap-carousel
媒体播放插件
可滚动tab分页插件
react-native-scrollable-tab-view
使用此插件需要给它的父组件设置高度,否则只有tabBar能显示,内容不会显示,无法点击和滑动
2018-11-07 827
Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scripta patrioque scribentur, at pro
Powered By SanMVC Copyright © 2021 黔ICP备16011043号-1