标签: react-navigation

我使用了 createBottomTabNavigator，但无法隐藏特定屏幕上的底部应用栏

const StackHome = createStackNavigator(
  {
    Home: Home,
    Autor: Autor,
    Publicacion: Publicacion,
    Comentarios: {
      screen: Comentarios,
      navigationOptions:{
        // this should do the work, but it doesn't
        tabBarVisible: false
      }
    }
  }
);

我在 React Native 工作，实际上我正在尝试实现一种自定义侧边菜单以避免 DrawerMenu 实现，我尝试只是在 headerLeft 上添加一个图标，但它不起作用，按下时它没有任何动作。

class HomeScreen extends React.Component {
    static navigationOptions = {
        headerTitle: ('',
            <Image style={{ width: 150, height: 40 }}
                source={require('./images/logo.png')}
            />
        ),
        headerLeft: (
            <TouchableHighlight onPress={this._logout}>
                <Image style={{ width: 40, height: 40 }}
                    source={require('./images/hamburger_icon.png')}
                />
            </TouchableHighlight>
        ),
    }
}

当我尝试将按钮放置在 mapView 中时也是如此。

<View style={{ flex: 1 }}>

    <MapView
        ...
    >
        <Button onPress={this._logout} title="Logout" />
    </MapView>

</View >

但是在视图中实现的相同按钮效果很好。

<View style={{ flex: 1 }}>
     <Button onPress={this._logout} title="Logout" />
    <MapView
        ...
    >
        ...
    </MapView>

</View …

这可能不是问这个问题的最佳地点，但我在其他任何地方都找不到真正的答案，如果不可能，我会感到惊讶。

我有一个底部标签导航器，底部有四个标签。最初我createBottomTabNavigator用于底部标签导航。它的风格完美地符合我的要求。像下面的图片：

问题是（在此 GitHub 问题中引用：https : //github.com/react-navigation/react-navigation/issues/4146和此 GitHub 问题：https : //github.com/react-navigation/react-navigation /issues/4236 )createBottomTabNavigator不再支持屏幕动画。所以我按照第一个问题的建议和实施做了createMaterialTopTabNavigator。它的风格几乎完美。这是创建的样式：

正如您所看到的，我的其他样式使活动文本和活动白色有效，但对于活动选项卡背景颜色，没有任何效果。

这是我的相关代码：

const tabConfigs = {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    inactiveTintColor: '#425563',
    activeTintColor: '#fff',
    activeBackgroundColor: '#ff6900',
    indicatorStyle: {
      display: 'none',
    },
    showIcon: true,
    tabStyle: {
      width: '100%',
    },
    labelStyle: {
      fontSize: 11,
      fontWeight: 'bold',
      marginBottom: 5,
    },
    style: {
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      height: 55,
      width: '100%',
      borderTopWidth: 0,
      position: 'absolute',
      bottom: 0,
      left: 0, …

这是App.jsReact Native 0.59 应用程序的。

import React, {Component} from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Event from './src/components/event/Event.js';
import Chat from './src/components/chat/Chat.js';
import GLOBAL from "../../lib/global";

//socket.io
const socket = io(GLOBAL.BASE_URL, {
  transports: ['websocket'],
  jsonp: false
});

//create the navigator
const navigator = createStackNavigator(
  {
    Event:  Event,
    Chat: {
      screen: Chat,
      
    } 
  }, {
    initialRouteName: "Event"
  }
);

//export it as the root component
export default createAppContainer(navigator); 

将socket需要被传递到Chat组件。由于只有 Chat 组件使用socket，我想 …

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createBottomTabNavigator, createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import Event from './src/components/event/Event.js';
import Chat from './src/components/chat/Chat.js';
import Signup from "./src/components/signup/Signup.js";
import Verif1 from "./src/components/signup/Verif1.js";
import NewEvent from "./src/components/event/Newevent.js";
import EditUser from "./src/components/user/Edituser";
import NewUser from "./src/components/user/Newuser";
import io from 'socket.io-client';
import GLOBAL from "./src/lib/global";
import SplashScreen from "./src/components/splashscreen/SplashScreen";


const instructions = Platform.select({
  ios: …

关于反应导航 setParams() 的问题。我在 Reactiflux 上问过，但没有人回答。我正在尝试在函数组件中以编程方式设置标题。

从另一个 Stack Overflow 线程，追溯更新静态标题，像这样，工作：

const Comp = props => { ... };

Comp.navigationOptions = ({ navigation }) => ({
  title: 'Static Title'
});

但是我需要从组件内部访问组件状态，这不起作用：

const Comp =({ navigation }) => {
 const [title, setTitle] = useState('');

 useEffect(() => {
     navigation.setParams({ title });
 }, [title]);

 return ( ... );
}

如果 setParams() 是错误的方法，请赐教

编辑：补充一点，当我console.log(navigation)看到它正在更改navigation.state.params.title为正确的字符串时，但它没有显示为标题。

当我想从 Page1 导航到 Page2 时，当前行为Ios 应用程序冻结

<Button title = "Go to Page2" onPress={() => this.props.navigation.navigate("Page2")} />

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

export default class Page1 extends Component{
    render() {
        return(
            <View>
                <Text>Page 1</Text>
                <Button title = "Go to page 2" onPress={() => this.props.navigation.navigate("Page2")} />
            </View>
        )
    }
}

import React, {Component} from 'react';
import {View, …