标签: react-native-navigation

我正在使用react-native，但我遇到了导航器的问题。

代码：

应用程序.js

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

import { StackNavigator } from 'react-navigation';

import loginScreen from './src/components/loginView';
import registerScreen from './src/components/registerView';

const Appmemes = StackNavigator({
   Login: {screen: loginScreen},
   Register: {screen: registerScreen}
});

export default Appmemes;

AppRegistry.registerComponent('Appmemes', () => Appmemes);

loginView.js 工作正常：

.
.
.
  <View style={styles.formContainer}>
          <LoginForm/>
  </View>
.
.
.    

登录表单.js

import React, { Component } from 'react'
import { StyleSheet, TextInput, Text, View, TouchableOpacity, AppRegistry} from 'react-native'
import …

我的应用程序在React Native Navigation v1.0和react-native v0.56.0上运行。这在 Android 模拟器上运行得很好，没有任何问题。

最近，我计划按照ReactNative 页面中描述的步骤进行生产构建。

在使用命令生成发布 APK 时./gradlew assembleRelease，最终我抛出了错误 - File not found: index.android.js in any of the project roots；但我的项目由index.js组成，而不是index.android.js。

在 Wix Git 上获得帮助的可能性较小，因为他们现在对 v1.0 的关注较少。所以，我希望能找到一条出路。

这是我的MainApplication.java内容：

import android.support.annotation.Nullable;

import com.facebook.react.ReactPackage;
import com.reactnativenavigation.NavigationApplication;

import java.util.Arrays;
import java.util.List;

import com.reactnative.ivpusic.imagepicker.PickerPackage;
import com.oblador.vectoricons.VectorIconsPackage;

public class MainApplication extends NavigationApplication {
    @Override
    public boolean isDebug() {
        return BuildConfig.DEBUG;
    }

    @Nullable
    @Override
    public List<ReactPackage> createAdditionalReactPackages() {
        return Arrays.<ReactPackage>asList(
            new PickerPackage(),
            new VectorIconsPackage()
        );
    }

    @Nullable …

这是我的应用程序，带有三个导航屏幕。

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Scan from '../containers/scan';
import List from '../containers/list';
import More from './more';

const Tab = createBottomTabNavigator();

function Home(props) {
  return (
      <Tab.Navigator>
        <Tab.Screen 
          name="List" 
          component={List}
        />
        <Tab.Screen 
          name="Scan" 
          component={Scan} 
        />
        <Tab.Screen 
          name="More" 
          component={More} 
        />
      </Tab.Navigator>
  );  
}

export default Home;

当我启动应用程序时，“列表”屏幕可见。

如何将“扫描”屏幕设置为默认屏幕？

我想让我的选项卡导航器在视觉上保持以下顺序：“主页”选项卡、“连接”选项卡、“聊天”选项卡

但我希望“连接”选项卡（第二个选项卡）成为应用程序加载时打开的第一个选项卡。我没有找到一种方法可以将其添加到堆栈导航器而不重新排列选项卡的顺序。除了第一个具有以下结构的选项卡之外，是否还有另一种方法可以定位选项卡：

const switchNavigator = createSwitchNavigator({
  LoadingScreen,
  FirstLoginScreen,
  loginFlow: createStackNavigator({
    Main: MainScreen,
    EmailLogin: EmailLoginScreen,
    PhoneLogin: RegisterScreens,
  }),
  mainFlow: createBottomTabNavigator(
    {
      Home: createStackNavigator({
        HomeScreen,
        EditAccountScreen,
        EditPreferencesScreen,
        EditProfileScreen,
        ProfileCardScreen,
      }),
      Connect: ConnectionsScreen,
      Chat: createStackNavigator({
        AllChatScreen,
        SingleChat,
      })
    },
    {
      defaultNavigationOptions: ({navigation}) => ({
        tabBarIcon: ({tintColor}) => {
          const {routeName} = navigation.state;
          if (routeName === "Home") {
            return <MaterialIcons name={"home"} size={20} color={tintColor} />;
          } else if (routeName === "Connect") {
            return <MaterialIcons name={"link"} size={20} color={tintColor} />;
          } else if (routeName === "Chat") { …

我想更改标签栏背景颜色。

我的底部导航有 5 个选项卡。首先，当我触摸主页选项卡时。当我触摸其他（四个）选项卡时，我想将选项卡栏的背景颜色更改为“透明”。我想将选项卡栏的背景颜色更改为“白色”，我也想通过其他选项卡更改 activeTintColor 。

这是我的代码和屏幕截图（我想制作这个屏幕截图）。

现在是我的主屏幕。主屏幕截图

我想要另一个屏幕。截屏

import { View } from 'react-native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import MyHomeStack from './HomeStack';
import MyProfileStack from './ProfileStack';

import InformScreen from '../screens/InformScreen';
import SearchScreen from '../screens/SearchScreen';
import UploadScreen from '../screens/UploadScreen';

import CustomIcon from '../components/CustomIcon';

const Tab = createBottomTabNavigator();

function MainTabStack(){
  return (
    <Tab.Navigator
      initialRouteName="Home"
      labelStyle={{ fontSize: 12 }}
      tabBarOptions={{
        style: {
          height: '9%',
          backgroundColor: 'transparent',
          position:'absolute',
          bottom:0,
          elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
      }}>
      <Tab.Screen
        name="Home"
        component={MyHomeStack}
        options={{
          tabBarIcon: …

大家好，我是反应原生新手，遇到了导航问题。我已经浏览了与此相关的每个问题，但发现没有任何帮助。

我有这样的导航结构

选项卡导航器

1. HomeStack [主屏幕，屏幕2]

2. PostStack[cameraScreen,UploadPostScreen]

现在我想在上传帖子后导航到 HomeStack 的主屏幕，同时我想删除这些帖子和上传屏幕，这样我就无法通过按后退按钮返回。

我想存档一个动态标签（可以打开和关闭），能够像在任何浏览器中一样查看标签概述。知道从哪里开始吗？

嘿，当我回到其他选项卡时，第一次遇到重新渲染屏幕的问题时，我正在使用反应本机底部选项卡导航。我尝试在 useEffect() 中使用isFocused但它对我不起作用。

const LandScreen = ({navigation}) => {
  return (
    <Tab.Navigator
      
      tabBarOptions={{
        showLabel: false,
        activeTintColor: colors.primary,
        inactiveTintColor: colors.textHead,
      }}
      
      >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'home' : 'home';
            return <Icon name={icon} color={color} size={size} />;
          },
        }}
      />
      <Tab.Screen
        name="Message"
        component={ChatStackScreen}
        options={{
          tabBarIcon: ({focused, color, size}) => {
            const icon = focused ? 'chatbox-ellipses' : 'chatbox-ellipses';
            return <Icon name={icon} color={color} size={size} />;
          },
          
        }}
      />
      <Tab.Screen
        name="Requests"
        component={RequestStackScreen} …

I am using react-navigation and I am having an issue with it. I am trying to make it so the application changes tabs when a user swipes. However, I can't get it to work.

I have tried gestureEnabled and swipeEnabled keys but it doesn't seem to have an effect.

What am I doing wrong?

App:

const { Navigator, Screen } = createStackNavigator();
return (
    <NavigationContainer>
      <Navigator>
        <>
          <Screen options={{headerShown: false}} name={'BottomTabsNavigator'} component={BottomTabsNavigator}/>
          {/* All other routes beside bottom Navigation ones …

是否可以更改react-native-navigation标签栏中的图标？
我的意思是，例如，在我的应用程序中我确实调用了api，并且在响应到来之后，我需要将Icon标签栏更改为新的。
例如Heart图标到Mail图标。

感谢任何帮助！