react-native 顶部切换

最新推荐文章于 2022-04-19 23:58:29 发布

小白的成长之路_

最新推荐文章于 2022-04-19 23:58:29 发布

阅读量485

点赞数 1

本文链接：https://blog.csdn.net/XiaoZhuang__/article/details/107785373

版权

本文详细介绍了如何在React-Native项目中实现顶部导航栏的切换效果，包括使用Navigator组件、设置路由配置、传递参数以及实现平滑过渡动画，帮助开发者创建出色的移动端应用用户体验。

摘要由CSDN通过智能技术生成

import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';

<View style={styles.container}>
    <ScrollableTabView
        locked={false}
        // initialPage={1}
        style={
  {flex:1}}
        renderTabBar={() =>
            <CustomTabBar
                backgroundColor={'#3c6df0'}
                activeTextColor={'#ffffff'}
                inactiveTextColor={'#e8e8e8'}
                textStyle={
  {fontSize: p(30),}}
                imagesUrl={'shaixuanwhite'}
                action={()=>this.props.navigation.goBack()}
                {...this.props}
            />}
    >
        <SubscriptionOrder tabLabel={'德玛西亚'} {...this.props}/>
        <TransferOrder tabLabel={'诺克萨斯'} {...this.props}/>
    </ScrollableTabView>
</View>

import {Image, Platform, TouchableOpacity} from "react-native";

const React = require('react');
const {ViewPropTypes} = ReactNative = require('react-native');
const PropTypes = require('prop-types');
const createReactClass = require('create-react-