react-native笔记
react-native笔记
  • 新版本转场动画组件,用于自定义转场效果

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

  • 媒体播放插件

react-native-video

  • 可滚动tab分页插件

react-native-scrollable-tab-view
使用此插件需要给它的父组件设置高度,否则只有tabBar能显示,内容不会显示,无法点击和滑动

2018-11-07 827

 

评论

热门文章

Instagram

Lorem ipsum ex vix illud nonummy, novum tation et his. At vix scripta patrioque scribentur, at pro