标签: react-navigation

我完全遵循教程https://reactnavigation.org/docs/intro/ 但是标题没有出现.这是代码和结果

import Expo from 'expo';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import {StackNavigator} from 'react-navigation';


class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  }

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text>Open up main.js to start working on your app!</Text>
        <Button onPress={()=>navigate('Chat',{user:'Lucy'})} title = 'Chat with Lucy'></Button>
      </View>
    );
  }
}
class ChatScreen extends React.Component {
  // Nav options can be defined as a function …

我正在使用react native中的react导航设置标签栏。我无法为选定/未选定状态设置多个标签栏图标。任何参考或文档会有所帮助吗？

我想在我的DrawerNavigator和TabNavigator之间建立一个嵌套视图，但是无法正常工作。

码：

const SubNavigation = TabNavigator({
  SubOne: { screen: SubOne },
  SubTwo: { screen: SubTwo },
}, {
  tabBarComponent: TabBarTop,
  tabBarPosition: 'top',
  initialRouteName: 'SubOne',
});

class SubScreen extends Component {
  static navigationOptions = {
    title: 'Subscreen',
  };

  render() {
    const { navigation } = this.props;
    return (
      <View>
        <Header navigation={navigation} />
        <SubNavigation navigation={navigation} />
      </View>
    );
  }
}

const PrimaryNav = DrawerNavigator({
  StartScreen: { screen: StartScreen },
  SubScreen: { screen: SubScreen },
}, {
  initialRouteName: 'StartScreen',
});

我这样做是因为我想要每个PrimaryNav屏幕的自定义标题。我真的不知道这是否是最佳实践，我习惯于使用react-router在这里定义类似的容器组件。

我收到上述Cannot …

我正在使用'react-navigation'中的TabNavigator.我想隐藏或删除图标下的文字.

这是TabNavigator的一部分.(我正在使用世博会)

    Camera: {
      screen: CameraScreen,
    },
    Noti: {
      screen: NotificationScreen,
    },
    Menu: {
      screen: MenuStackNavigator,
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
         header: null, <<<
         tabBarIcon: ({ focused }) => {
                     ...
         },
     }),
     header: null, <<<-
     headerMode: 'none',  <<--       
     tabBarComponent: TabBarBottom,
     tabBarPosition: 'bottom',
     animationEnabled: false,
     swipeEnabled: false,
     backBehavior: 'none',

这是CamaraScreen

class CameraScreen extends Component {
  static navigationOptions = {
    title: 'Camera'
  }

到目前为止，我的应用程序看上去很漂亮，但是一旦从“辅助功能”中启用了“大文本”选项，所有内容就开始变得肮脏，甚至是导航栏。

请提出一种智能处理这些更改的方法。

标签工作正常.但是我不能<Tabs>像下面的图像那样改变下划线和高度

我正在使用Native-Base来处理标签.但我想不出任何改变其默认高度的方法.

<Tabs initialPage={0}
  tabBarUnderlineStyle={styles.tabBarUnderlineStyle}
  style={{height:40}}
>
  <Tab 
    heading="Following"
    tabStyle={styles.tabStyle}
    activeTabStyle={styles.activeTabStyle}
    activeTextStyle={styles.activeTextStyle}
    textStyle={styles.textStyle}
  >
    <FeedScreen navigation={this.props.navigation}/>
  </Tab>

我应该使用其他导航吗？原生基地很难定制.. :(

更新请求,我分享我的风格

  tabStyle : {
    // backgroundColor: theme.colors.navbar,
    backgroundColor: 'white',
    justifyContent: 'center',
    width: 120,
    height: 40,
  },
  activeTabStyle: {
    backgroundColor: 'white',
    height: 40,
  },
  textStyle: {
    // color: 'white',
    color: "#968D8A"
  },
  activeTextStyle: {
    // color: 'white',
    color: theme.colors.navbar
  },
  tabBarUnderlineStyle: {
    backgroundColor: theme.colors.navbar,
    height: 2
  }

有什么方法可以配置，react-navigation以便单个屏幕可以处理多个链接？

每个屏幕都StackNavigator可以具有path启用深层链接的可选属性，StackNavigator还可以接受paths允许您覆盖每个特定屏幕的路径的选项，但它仍是一对一的映射。有没有办法声明应由单个屏幕处理的无限数量的路径？

我有屏幕1，可以使用以下命令从屏幕1导航到屏幕2：

navigation.navigate('Screen2')

在此屏幕上，我想转到上一个屏幕，它很简单：

navigation.goBack()

但是我想知道如何将一些数据传回Screen1？诸如此类的东西行不通，navigation.goBack({ myData: 'something' })所以我想知道一般建议使用哪种方法？

在我的React Native应用中，我想使用Vector Icons作为导航栏按钮。为此，我正在使用：https : //github.com/oblador/react-native-vector-icons 导航：https : //reactnavigation.org/

我也设法设置了图标，但是当我点击按钮时，背景变成黑色，我得到了不想要的效果。有没有办法在按下按钮时也能保持背景色透明？

这是我的代码：

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state

    return {
    headerTitle: "Blog posts",
    headerRight: (            
        <Icon.Button name="quote-right" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>            
      ),
    headerLeft: (                                     
        <Icon.Button name="navicon" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
            <Text style={{fontSize: 15}}></Text>
        </Icon.Button>                                                                     
      ),
    };
};

这就是我得到的：

我使用命令react-native init appName创建新的react本机应用程序.应用程序创建成功后,使用命令react-native run-android将其安装在我的设备中,它安装成功,并且工作正常......没问题

但是,一旦我安装反应导航和手势处理程序,我收到命令失败的错误:gradlew.bat installDebug运行命令后反应本机运行android我不知道什么是错的...我的旧反应原生项目工作正常精细.

我记得昨天我在我的一个旧项目中运行命令gradlew clean.这对我的新项目有影响吗？

如果有人帮忙,我会非常感激

这是完全错误

  FAILURE: Build failed with an exception.

  * Where:
  Settings file 'D:\React Native Apps\Practice\newapp\android\settings.gradle' line: 3

  * What went wrong:
  Could not compile settings file 'D:\React Native Apps\Practice\newapp\android\settings.gradle'.
  > startup failed:
  settings file 'D:\React Native Apps\Practice\newapp\android\settings.gradle': 3: unexpected char: '\' @ line 3, column 133.
     s\react-native-gesture-handler\android')
                                   ^

  1 error


  * Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to …