标签: react-navigation

我正在努力react-native并尝试整合react-navigation https://reactnavigation.org/docs/intro/进行导航.我在实施时遇到了一些困难.

index.android.js

**
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  AppRegistry,
  Image,
  View,
  Text,
  Button,
  StyleSheet
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotification";

class SplashScreen extends Component {
  render() {
    console.disableYellowBox = true;
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require("./img/talk_people.png")} />
        <Text style={{ fontSize: 22, textAlign: "center" }}>
          Never forget to stay in touch with the people …

我正在使用react-navigation,我有一个嵌套的StackNavigatorinsdie我的TabNavigator 这里是代码

  const MainNavigator = TabNavigator({
 selectadmin: { screen: SelectAdminScreen },
 otp: { screen: OtpScreen },
 password: { screen: PasswordScreen },
 pin: { screen: PinScreen },
 main: {
   screen: TabNavigator({
     orders: {
           screen: StackNavigator({
             orderlist: { screen: OrderListScreen },
             orderdetail: { screen: OrderDetailScreen }
           })
         }
   },
   {
     tabBarPosition: 'bottom',
     lazy: true,
     tabBarOptions: {
       labelStyle: { fontSize: 12 }
     }
   })
 }
},
{
 navigationOptions: {
  tabBarVisible: false
},
tabBarPosition: 'bottom',
swipeEnabled: false,
lazy: true,
animationEnabled: false, …

选项卡不活动时，我想隐藏TabBar标签。使用showLabelfrom tabBarOptions只能完全禁用它们。提前致谢。

我在create-react-native-app中使用React Navigation。

我正在使用这样的TabNavigator组件（iPhone SE）：

这TabNavigator是深蓝色的条，带有“作业1”，“聊天”，“文件”，“详细信息”。

我要自定义这些项目的文本。我想要非大写的文本（据我所知，这是用React Native Stylesheet不可能实现的），并为包裹在两行上的'Details'项目应用修复程序。

我在TabNavigator上浏览了React Navigation API，但是找不到答案。

如何为这些物品定型？

我已经花了几个小时在中找到处理状态的代码navigationOptions，但是直到现在我还不明白，

我有一个代码：

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state
    return {
      headerLeft: <FontAwesome name='arrow-left' size={20} color="#FFF" onPress={() => navigation.navigate('Home')} style={{margin: DeviceWidth*0.04}}/>,
      // here I want to show the TextInput if the `HeaderRight pressed` and show the `String` for the first time
      headerTitle: this.state.showSearch ? <TextInput
        placeholder="this is placeholder"
        placeholder="search"
        underlineColorAndroid='transparent'
        placeholderTextColor= 'gray'
        minWidth={DeviceWidth*0.75}
        style={{borderWidth:1, borderColor:'grey', backgroundColor:'white', borderRadius:50}}
      /> : 'My Patient',
      // Here I want to set the state …

如何根据道具设置导航栏的标题，我想做下面的事情。

static navigationOptions = {
title: this.props.navigation.state.params.name,

};

依赖版本:

"dependencies": {
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-navigation": "^2.0.1",
  }

我react-navigation用来浏览我的屏幕,我创建了两个屏幕和一个抽屉

Router.js:

import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import MainActivity from './components/MainActivity';
import ThisWeek from './components/ThisWeek';
import DrawerPanel from './components/DrawerPanel';

const Stack = createStackNavigator({
  MainActivity: {
    screen: MainActivity,
    navigationOptions: {
      title: 'Welcome',
      headerStyle: {
        backgroundColor: '#81A3A7', 
        elevation: null
      }
    }
  },
  ThisWeek: {
    screen: ThisWeek
  }
},
{
  initialRouteName: 'MainActivity'
}
);

const Router = createDrawerNavigator({
    FirstScreen: {
      screen: Stack
    }
  },
  {
    contentComponent: DrawerPanel,
    drawerWidth: 200 …

我正在尝试实现deletePost按钮，但是我正在努力将其传递到我的标头组件中。这是

export class PostScreen extends Component {


  // Custom headerTitle component.
  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    return { headerTitle: <PostTitle {...params} handleDelete={this.handleDelete}/> }
  };

  handleDelete = async (id) => {
    const { deletePost } = this.props;
    const token = await AsyncStorage.getItem('token');
    deletePost(token, id);
  }

render() {

这似乎不是传递它的正确方法。正确的方法是什么？我在文档中找不到任何内容。

我想确保在导航到新页面时会触发生命周期方法ComponentWillUnmount。我找到了这篇文章，但是似乎没有提到导航到新页面。我也找到了这篇文章，但是我正在使用react-navigation。另外，我没有使用pop / push。我只是使用this.props.navigation.navigate（'SomePage'）进入下一页

我使用的是bottomTabNavigator与lazy设置为false。对于屏幕，我渲染了react-native-webview。之所以调用render函数，是因为我可以看到console.log，但是直到选项卡被激活，实际的Webview才开始加载。我开始的选项卡立即开始加载。

标签

const Tab = () => { 
    console.log('render') // this is being called right away

    return (<WebView 
             onLoadStart={() => console.log('on load start') // this is being called only when tab becomes active (clicking on it) }
             source={{uri:'linkgoes.here'}} />) 
}

航海家

  const TabNavigator = createBottomTabNavigator(
  {
    TabOne: {
      screen: Tab
    },
    TabTwo: {
      screen: Tab
    }
  },
  {
    initialRouteName: 'TabOne',
    lazy: false,
  }
)

react-navigation从1.x 升级到3.x并升级react-native和react-native-webview。我希望webview立即开始加载，而不只是在可见时开始加载。