标签: react-navigation

我正在使用react-navigation并试图允许用户从headerRight按钮导航到另一个屏幕.环顾四周,发现了一个推荐的答案,但又遇到了另一个问题.有没有其他方法可以使用headerRight导航到其他屏幕？

错误信息

这是我的代码片段:

尝试使用右侧标题按钮进行导航

谢谢

我正在尝试在反应导航中创建自定义抽屉。但是我遇到一个错误。错误是JSX attributes must only be assigned a non-empty expression。我什至创建了数组并将其映射为显示，但仍然出现错误。我有想念吗？

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';        

const navitems =[
    {
      name:'Home',
      nav:'classesnew',
    },
    {
      name:'Device',
      nav:'start',
    },
]


class DrawerContent extends React.Component{
  constructor(props) {
    super(props)
  }
  render(){
    return  (
      <Image source={require('../images/logo.png')}
      style={styles.container}>
              <View style={{justifyContent: 'center',
              alignItems: 'center',}}>
                <Image style={styles.image} source={{uri: ''}}/>
              </View>
              <View>
              {
                  navitems.map((l,i)=>{
                    return (
                      <TouchableOpacity
                          key={i}
                          style={{marginBottom:0.5}}
                          onPress={()=>{
                                        this.props.navigation.navigate(l.nav)
                                        }
                      }>
                        <View …

我有这个路由器配置:

export const Bird = StackNavigator({
    ResidentBirds: {
        screen: BirdList,
        navigationOptions: ({navigation}) => ({
            title: 'Resident Birds',
        })
    },
    MigratoryBirds: {
        screen: BirdList,
        navigationOptions: {
            title: 'Migratory Birds'
        }
    }
});

两个路由都具有相同的屏幕组件(BirdList).

BirdList.js:

export default class BirdList extends React.Component {
    state = {
        fetching: false,
        dataSource: []
    };

    componentDidMount() {
        this.getBirds();
    }

    getBirds = () => {
        // const birdType = this.props.navigation.state.params.birdType;
        // const args = this.pros.navigation.state.params.args;

        // fetch list of birds of type birdType
    };

    render() { …

我正在尝试将标题的字体颜色从黑色更改为白色。无法做到。我在代码中有以下内容：

navigationOptions: {
  title: 'PRACTICIA',
  headerLeft: null,
  headerStyle: {
    backgroundColor: '#33ACDE',
    color: 'white'
    }
  }
}

我得到以下结果（黑色）。

我的项目中有2个标签-外部标签和内部标签。在我的内部标签中，我有地图和列表，其中显示了标记和详细信息。

现在，当我将选项卡从地图更改为列表或反之时，我想重新加载（获取数据）。我只能调用一次，即第一次访问，因为我一直在从组件Will Mount（）调用API。如何识别标签的移动并重新加载地图？

任何线索将不胜感激

如何在React导航（3.x）中为全屏模式提供透明背景。此处给出的解决方案不适用于新版本的react-navigation。我想要新的全屏模式中的透明颜色，该颜色显示在另一个屏幕上。

  const MainNavigator = createStackNavigator(
  {
    BrowserHome: { screen: BrowserHome },
    ImageDetailModal: {
      screen: ImageDetail,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    mode: "modal",
    cardStyle: {
      backgroundColor: "transparent",
      opacity: 1
    }
  }
);

const AppContainer = createAppContainer(MainNavigator);

export default AppContainer;

在“ BrowserHome”组件上显示的“图像细节”组件是：

export default class ImageDetail extends React.Component {
  render() {
    const modalColor = this.props.navigation.getParam("modalColor");
    return (
      <View
        style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}
      >
        <View
          style={{
            height: "50%",
            width: "100%",
            backgroundColor: "red",
            justifyContent: "center" …

我的主屏幕上有5个标签。

• 主页标签
• 搜索标签
• AddPostTab
• 通知标签
• 个人资料标签

AddPostTab就是这样。

const AddPostTab = createStackNavigator({
    AddPost: {
      screen: AddPost,
    },
    ImageDescription: {
      screen: ImageDescription
    },
    },
    {
      headerMode:'none',
      mode:'modal'
    }
);

当我从ImageDescription屏幕返回主屏幕，然后AddPostTab再次进入时，我将直接转到ImageDescription屏幕。但我希望能够转到AddPost屏幕。

我也尝试过

 const resetAction = StackActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({ routeName: 'AddPost' }),
                ],
              });
              this.props.navigation.dispatch(resetAction);

但这只将我带到AddPost屏幕。但是，如果我使用Home而不是AddPost，则无法使用。我该如何重设堆栈以进入主屏幕？

我正在使用带有React-Navigation模块的React-Native（Expo）开发一个应用程序。我正在努力获得“ createBottomTabBar”样式所需的内容，并致力于自定义标签栏组件。

在哪里可以找到/找到类似的示例？我的代码正确吗？

我正在使用：React Native中底部导航上的边框底部和此视频：https : //www.youtube.com/watch?v=w24FE9PZpzk

但是我不知道该怎么做。

路由器/index.js

import { createSwitchNavigator,createStackNavigator, createBottomTabNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';

import { Home, SignUpScreen, LoginScreen, ForgotPasswordScreen,  Setting, AboutScreen, ScanFlight, FlightDetails, ChatList, ChatMessages, FriendList, exploreProfile, myProfile, FlightAdd, Notifications,Achievements } from '../Screens';

// Tab bar Custom Component
import appBottomTabs from '../NavigationLayout/bottomTabBar'

// Bottom Tab navigation

const MainTabNavigator = createBottomTabNavigator({
    Home,
    ChatList,
    ScanFlight
}, {
tabBarOptions: {
      activeTintColor: "#6200EE",      
    inactiveTintColor: "#858585",  
    style: {               
     paddingVertical: 10,        
     backgroundColor: "#fff",
     border: '#ffffff'  
    },      
    labelStyle: { …

我使用react-navigation为React Native应用程序创建了一个简单的标签导航。它工作正常，但我似乎无法调整其高度。最多只能达到80，我需要将其设为当前高度的150％，也许是两倍。

有谁知道如何增加制表符导航的高度（最好不要再创建约6个js文件？），我只有有限的时间来修复它。

以下是导航代码的原样

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './screens/HomeScreen';
import AboutScreen from './screens/AboutScreen';
import SettingsScreen from './screens/SettingsScreen';


export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  initialRouteName: "Home"
});

const AppContainer = createAppContainer(AppNavigator);

谢谢

我是本机反应的新手。在这里，我试图在headerRight上添加两个按钮。我确实添加了一个按钮，但我不知道如何放置多个按钮。这样的事情。

我正在使用react-navigaiton和react-navigation-header-buttons。

这就是我添加一个按钮的方式。

主屏幕

headerRight: (
            <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
                <Item
                    title={"Search"}
                    iconName={"md-search"}
                    onPress={() => {
                        console.log('Search')
                    }}
                />
            </HeaderButtons>
        ),

CustomHeaderButton.js

import {HeaderButton, Item} from 'react-navigation-header-buttons';
import {Ionicons} from '@expo/vector-icons';
const CustomHeaderButton = props => {
    return(
        <HeaderButton
            {...props}
            IconComponent={Ionicons}
            iconSize={23}
            color={'black'}
        />
    )
};
export default CustomHeaderButton;