标签: tabnavigator

我将TabNavigator从Flex 3迁移到Flex 4.5时遇到了问题.剥离到最低限度,以下代码将产生错误,即TabNavigator的第二个子项无法正确创建:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    >
    <fx:Script>
        <![CDATA[
            protected function over():void
            {
                trace('over');
            }

            protected function content_one_init():void
            {
                content_one.enabled = true;
                navigator.selectedIndex = 1;
            }

        ]]>
    </fx:Script>
    <mx:TabNavigator
        id="navigator"
        creationPolicy="auto"
        width="100%" height="100%"
        >
        <mx:VBox
            id="content_one"
            enabled="false"
            creationComplete="content_one_init()"
            label="One"
            mouseOver="over()"
            />
        <mx:VBox label="Two">
            <mx:Label text="Content Two" />
        </mx:VBox>
    </mx:TabNavigator>
</s:Application>

我在启动时看到的是一个TabNavigator,它选择了第二个标签但没有内容而不是预期的"内容二"标签.该navigator.selectedIndex = 1;指令只是为了舒适,如果您在启动后用鼠标选择第二个选项卡,则也会出现错误.

现在来了有趣的部分:如果我执行以下任何操作,则会创建第二个子项:

• creationPolicy="all"在content_one上设置(这是预期的),
• 评论content_one.enabled = true,
• 删除enabled="false"content_one,
• mouseOver="over()"从content_one中删除(这个真的很奇怪,因为从不调用处理程序)

这真的是一个Flex bug,还是有什么我想念的？我使用的是Flex 4.5.0.20967,所有这些都在Flex 3.5中运行良好.

谢谢.

我想在用户每次更改选项卡时重新加载 tabNavigator。当用户更改选项卡时，不会调用 React Native 的生命周期方法。那么如何在 TabNavigator 中重新加载选项卡：

下面的示例有两个选项卡：1) 主页 2) 事件。现在我想在用户从主页选项卡返回时刷新事件选项卡。

EXPO LINK： 世博标签导航器

代码 ：

import React, {Component} from 'react';
import  {View, StyleSheet, Image, FlatList, ScrollView, Dimensions } from 'react-native';
import { Button, List, ListItem, Card  } from 'react-native-elements' // 0.15.0
//import { Constants } from 'expo';
import { TabNavigator, StackNavigator } from 'react-navigation'; // 1.0.0-beta.11

//image screen width and height defs
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;


export default class App extends Component {
  render() { …

我相对确定我发现这是不可能的，但是我想确保没有办法。

有问题的应用程序从AppNavigator开始StackNavigator。

export const AppNavigator = StackNavigator({
    Login: {
        screen: Login,
        navigationOptions: ({navigation}) => ({
            title: 'Aanmelden',
            params: {
                nuke: navigation.state.params && !!navigation.state.params.nuke,
            },
        }),
    },
    Main: {
        screen: DynamicTabBar,
        navigationOptions: ({navigation}) => ({
            title: 'Follow-up',
        }),
    },
}, {
    mode: 'modal',
    headerMode: 'none',
});

export class AppWithNavigationState extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <AppNavigator navigation={addNavigationHelpers({ dispatch: this.props.dispatch, state: this.props.navigationReducer })} />
    }
}

AppWithNavigationState.propTypes = {
    dispatch: React.PropTypes.func.isRequired,
    navigationReducer: React.PropTypes.object.isRequired,
};

const mapStateToProps …

如何从 TabNavigator 中隐藏某些 TabBar 项目。是否有某个TabBarOptions选项具有visible这样的键（真/假）？

const Tabs = TabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: {
    screen: More
  },
})

我有一个带有三个选项卡的底部导航(主页,仪表板,通知).每个底部导航选项卡都是一个片段.第一个标签即.主片段包含另外的顶部导航标签,其具有四个标签(标签1,标签2,标签3,标签4).

问题

1. 当我直接从" 主页"选项卡导航到" 通知"选项卡并返回" 主页"选项卡时,Tab1 /选择了以前选择的选项卡(顶部导航选项卡),未加载选项卡的内容.

2. 当我从选项卡1(主页片段选项卡)一直滑动选项卡到" 通知"选项卡并向后滑动时,在到达选项卡4时,未加载选项卡的内容,并且在第一次从选项卡4滑动到选项卡3时,滑动不会拿到表3.选项卡指示器只需移动一点,然后在第二次滑动时按预期方式转到选项卡3.

该应用程序包含大量代码,因此我只需将完整代码链接到Github.

这里有我的代码快速参考

MainActivity.java

public class MainActivity extends AppCompatActivity {


    private ViewPager viewPager;

    NavigationView navigationView;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    viewPager.setCurrentItem(0);
                    return true;
                case R.id.navigation_dashboard:
                    viewPager.setCurrentItem(1);
                    return true;
                case R.id.navigation_notifications:
                    viewPager.setCurrentItem(2);
                    return true;
            }
            return false;
        }

    }; …

我在react-native中有以下代码

import React, {Component} from 'react';
import {TabNavigator} from 'react-navigation';
import {View} from 'react-native';

class Home extends Component {

  static navigationOptions = {
        title:'Home',
        tabBarLabel:'First'
  };

  render() {
    return <View></View>;
  }

}

const tabOptions = {

    tabBarOptions: {
        activeTintColor:'white',
        inactiveTintColor:'#D3D3D3',
        style:{
            backgroundColor:'green',
            borderTopWidth:1,
            borderTopColor:'#D3D3D3'
        },
        tabBarSelectedItemStyle: {
            borderBottomWidth: 2,
            borderBottomColor: 'red',
        },
    },
}

const ProductNavigator = TabNavigator({
  First: {screen: Home},
  Second:{screen: Home}
},
tabOptions
);
export default ProductNavigator;

这是在Android模拟器中呈现时的样子

我希望黄色下划线是RED下划线.但我的规则tabBarSelectedItemStyle宣布红色下划线没有被承认.如何使所选标签栏项的下划线变为红色？

我正在使用React Native构建移动应用程序,我正在使用React Navigation在我的应用程序中构建导航器.React导航为我提供了一个很好的方法来处理抽屉内的嵌套Tab栏,它也在Stack Navigator中.

问题是我需要指定组件,以便我可以将它们提供到Tab栏中.让我们说我们必须从API中获取一些类别,我们不知道数据中有多少类别.此外,我无法弄清楚即使我尝试在启动时获取数据,导航器和redux配置也会在启动时发生,这意味着应用程序必须知道这些选项卡导航器中的组件.我无法弄清楚即使我从API获取数据,我如何创建多个组件并停止应用程序配置.

下面的代码,演示了我如何实现标签栏.此代码在index.js中有效,因为正如我之前提到的,应用程序必须知道Navigator中的组件.

const TabStack = TabNavigator({
    Food: { screen: FoodStack},
    Drink : { screen: DrinkStack },
    HealthCare : { screen: SnackProducts },
    Snacks: { screen: SnackStack },
},
    {
        tabBarComponent : props => <CustomTabItems props={props}/>,
        tabBarPosition: 'top',
        animationEnabled : true,
        initialRouteName : 'Food',
        swipeEnabled: true,
        tabBarOptions : {
 
            scrollEnabled : true
        }
})

谢谢

这里是根代码

import { AppRegistry } from 'react-native';
import React from 'react';

import { Text, Image, ScrollView, View, List, ListItem, TouchableWithoutFeedback } from …

我想在Scroll上隐藏Header和TabNavigator选项卡.我怎么做？我想隐藏它们在Scroll上并在ScrollUp上显示它们.我的代码:

import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity} from 'react-native';

class ScrollTest extends Component {

    render(){
    const { params } = this.props.navigation.state;

        return(
            <View style={styles.container}>

               <ScrollView>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
               </ScrollView>

            </View>
        )
    }
}
const styles = StyleSheet.create({
  container:{
    flex:1, padding:5 
  },
  newView:{
     height: 200, backgroundColor:'green', margin:10
  }
})
export default ScrollTest;

我检查了Animated API的这个链接,但是无法弄清楚如何在onScoll中实现它？

所以标题HomeScreen和选项卡Tab1 …

我在 Expo 上收到一条错误消息，显示“createBottomTabNavigator()”已移至“react-navigation-tabs”。详情请见http........

我已经完成 npm install react-navigation-tabs 并更改了我的导入，但这些更改并没有消除错误

import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation'

import HomeScreen from './Home';

const TabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    SignUp: SignUpScreen
},
);

export default createAppContainer(TabNavigator);

我希望在安装 react-navigation-tabs 并更改我的导入后，问题会得到解决。

我是 React-Native 开发的新手。我正在使用' react-navigation '中的TabNavigator作为React-Native中的标签栏，除了标签栏activeBackgroundColor和inactiveBackgroundColor在android中没有改变外，一切正常。它只显示蓝色，如下图所示。

import React, { Component } from 'react';
import { TabNavigator } from 'react-navigation';
import { PixelRatio } from 'react-native';

import { ColorScheme } from '../Resources/ColorScheme';
import {Fonts} from '../Resources/Fonts';

import TAB1 from '../Screens/TAB1'
import TAB2 from '../Screens/TAB2'
 /** */
 var FONT_SIZE = 8;
 if (PixelRatio.get() === 2) {
  FONT_SIZE=10
 }else if (PixelRatio.get() === 3) {
    FONT_SIZE=12
  }

export default FavoritesScreenTabNavigator=TabNavigator({
    TAB1:{screen:TAB1},
    TAB2:{screen:TAB2}
  },{
      tabBarPosition:'top',
      swipeEnabled:true,
      animationEnabled:true,
      tabBarOptions:{
          activeTintColor:ColorScheme.tabBarSelectedTintColor,
          inactiveTintColor:ColorScheme.tabBarUnSelectedTintColor,
          activeBackgroundColor:'white', …