标签: react-navigation

我正在尝试向反应导航标题添加边框，但没有任何效果对我有用。

请注意，我使用的是版本 6。

以下是我迄今为止尝试过的选项：

options={{
          headerShadowVisible: true,
          shadowOffset: { height: 0, width: 0 },
          shadowColor: 'red',
          borderBottomColor: 'red',
          borderBottomWidth: 4,   
        }}

上述选项都不适合我。

我检查了文档，但找不到任何东西。

使用@react-navigation/material-bottom-tabs 并遵循本文档

我想知道如何删除活动选项卡图标后面的这个奇怪的白色圆形？

已经2个小时了，我正在尝试一切。我缺少一些东西

（注意：我正在使用文档中示例的相同代码，如果您想使用react-native 0.70.6重现，我在 v 0.68.1 上没有这个问题）

编辑：shifting={true}当我单击选项卡时：

我想创建一些带有堆栈和标签导航器的屏幕,但似乎没有用,它在虚拟设备上收到类似错误的错误消息...

这是因为导航还是什么？

这是我的代码

ConfirmActivation.js

import React, { Component } from 'react';
import { StyleSheet, Image } from 'react-native';
import { Container, Header, Content, Left, Right, Body, Text, StyleProvider, 
Form, Item, Input, Label, Button, View } from 'native-base';
import { StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import getTheme from '../../../native-base-theme/components';
import material from '../../../native-base-theme/variables/material';

import Index from '../tabs/Index';

export default class sharpcs extends React.Component {
    static navigationOptions = {
        title: <Image source={require('../../assets/img/sharp_logo.png')} style={{width: 200, height: …

在我的第一页上，有一个列表，可通过获取获取。这适用于第一个电话。但是当我使用转到另一个屏幕this.props.navigation.navigate('OtherScreen');并使用

 const backAction = NavigationActions.back({
     key: null,
 });
 this.props.navigation.dispatch(backAction)

我的列表不会刷新，因为componentDidMount调用提取的方法不会再次触发。我也尝试过componentWillUpdate，但是不会再次触发。

进入屏幕后，如何强制屏幕重新安装？

由于其松散的语法,我对javascript非常弱,但非常惩罚特殊字符的含义.

在react-native-navigation 教程中有这个片段

static navigationOptions = ({ navigation }) => {
   const {state, setParams} = navigation;
   const isInfo = state.params.mode === 'info';
   const {user} = state.params;
   return {
     title: isInfo ? `${user}'s Contact Info` : `Chat with 
 ${state.params.user}`,
     headerRight: (
       <Button
         title={isInfo ? 'Done' : `${user}'s info`}
         onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
       />
     ),
   };
 };

最初,我错误地输入第三行: const {isInfo} = state.params.mode === 'info';

我的代码不起作用.

有什么区别: const isInfo = state.params.mode === 'info';

从下一行开始,就有大括号缠绕 {user}

这对我来说非常混乱,但谷歌这些小事很难说,所以抱歉并提前感谢!

如何在React Native应用程序中更改导航标题的颜色？

我尝试初始化背景色，但是没有用。

以下是我的代码段navigationOptions：

static navigationOptions = ({ navigation }) => ({
    header: props => <Header 
        navigation={navigation}
        title={'Dashboard'}
        toggleDrawer
    />
})

另外，可以设置状态栏颜色吗？

目前，我有redux和stacknavigator，我想实现一个底部标签导航器。有了这个，我发现了关于tabnavigator的信息，我不确定如何实现这两个。这是我当前的App.js：

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStackNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

import store from './store'; //Import the store

import Home from './components/home' //Import the component file
import Cart from './components/cart';
import SearchResults from './components/searchResults';

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Root />
            </Provider>
        );
    }
}


const Root = createStackNavigator(
  {
    Home: …

我最近将react-navigation升级到v3，并运行了我的应用程序，但底部的标签栏图标似乎出现渲染错误。即使标签已渲染，图标也根本不会渲染。我正在使用react-native-vector-icons渲染图标。

我曾尝试在选项卡栏选项中将showIcon属性设置为true，但这也无法解决我的问题。我还尝试将react-navigation降级到v2.x，但这无济于事

const TabNavigatorConfig = {
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused }) => {
      const { routeName } = navigation.state;
      let iconName;
      switch (routeName) {
        case 'Batches':
          iconName = 'home';
          break;
        case 'Settings':
          iconName = 'settings';
          break;
        default:
          iconName = 'home';
          break;
      }
      return (
        <Icon
          size={22}
          name={iconName}
          color={focused ? colors.secondary.normal : colors.other.bbIconNormal}
        />
      );
    },
  }),
  animationEnabled: false,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  backBehavior: 'none',
  tabBarOptions: {
    showIcon: true,
    style: {
      backgroundColor: colors.other.bgNormal,
    },
  },
}; …

每当我在我的react本机项目中安装任何依赖项时，以及每当我将link命令用于例如react-native链接react-native-gesture-handler时，这都会导致我在图1中显示错误。它没有构建项目，显示错误gradlew.bat

以下代码显示了我的package.json文件

{
  "name": "navigations",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.3",
    "react-native-gesture-handler": "^1.0.15",
    "react-navigation": "^3.0.9"
  },
  "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.0.0",
    "jest": "24.0.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

在此处输入图片说明

我正在使用react-redux将redux连接到我的react-native项目，但是当我使用export default connect(state => ({ count: state.count }))(Test) method和import来反应react导航时，如图creactStackNavigator({test:Test})所示

The component for route 'test' must be a React component

import MyScreen from './MyScreen';
...
test: MyScreen,
}

但是当我删除connect()方法时，它工作得很好

环境：

"react":16.8.4
"react-native":0.59.4
"react-redux": "7.0.2",
"redux": "4.0.1",
"react-navigation": "2.18.2",

Test.js

import React, { Component } from 'react';
import { Text, View,Button} from 'react-native';
import  {connect}  from 'react-redux';

class Test extends Component {

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>count:{this.props.count}</Text>
         <Button …