Question

我的应用结构采用底部标签导航器的结构。目前，我只有两个标签。主屏幕和设置。导航的定义如下：

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

import { createBottomTabNavigator } from "react-navigation"
import Icon from 'react-native-vector-icons/Ionicons'

import HomeTab from './HomeTab'
import SettingsTab from './SettingsTab'

export default createBottomTabNavigator({
  Home:{
    screen: HomeTab,
    navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon:({tintColor})=>(
          <Icon name="ios-home" color={tintColor} size={24}/>
        )
    }
  },
  Settings:{
    screen: SettingsTab,
    navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon:({tintColor})=>(
          <Icon name="ios-settings" color={tintColor} size={24}/>
        )
    }
  }
},
{
  //router config
  initialRoutName: 'Home',
  order: ['Home', 'Settings'],
  //navigation for complete tab navigator
  navigationOptions:{
    tabBarVisible:true
  },
  tabBarOptions:{
    activeTintColor:'red',
    inactiveTintColor:'grey'
  }
});

在我的 HomeTab 中，我定义了一个FlatList，并为每个要添加 onPress 事件的列表项。为此，我决定使用navigation prop reference。为此，我实现了以下组件：

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button,
    FlatList,
    Image,
    ActivityIndicator,
    TouchableOpacity,
    ToastAndroid
} from "react-native";

import * as firebase from 'firebase';

export class HomeTab extends Component{
  constructor(){
    super()
    this.state = {
        dataSource: [],
        isLoading: true
    }
  }

  renderItem = ({item}) => {
      return (
        <TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }}
            onPress = {() => {this.props.navigation.navigate("ComeHere")}}>
            <Image style={{ width: 40, height: 40, margin: 5 }}
            source={{ uri: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Azure.png' }}
            />
            <View style={{ flex: 1, justifyContent: 'center' }}>
                <Text style={{ fontSize: 16, color: 'green' }}>
                    {item.city}, {item.zipCode}
                </Text>
                <Text style={{ fontSize: 13, marginBottom: 15 }}>
                    {item.address}
                </Text>
            </View>
            <View style={{justifyContent: 'flex-end', justifyContent: 'center', marginRight: 10}}>
                <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
                    ({item.numberOfMailItems})
                </Text>
            </View>
        </TouchableOpacity>
      )
  }

  renderSeparator = () => {
    return (
        <View
            style={{height: 1, width: '100%', backgroundColor: 'black'}}>
        </View>
    )
  }

  componentDidMount(){
    // Fetch some server data
  }

  render(){
    return (
      this.state.isLoading
      ?
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" color="green" animating />
      </View>
      :
      <View style={styles.container}>
        <FlatList style={{marginTop: 30}}
            data={this.state.dataSource}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => item.mailboxId}
            ItemSeparatorComponent={this.renderSeparator}
        />
      </View>
    )
  }
}

export default HomeTab;

当我单击一个项目时，什么也没有发生。问题不是该事件没有被触发，因为当我添加 console.log（'something'）时，它就可以工作。

有趣的是，当我添加此

console.log(JSON.stringify(this.props))

在 onPress 事件中，我得到以下信息：

{“导航”：{“状态”：{“键”：“主页”，“ routeName”：“主页”}，“动作”：{}}}

我的意思是，我根本看不到其中定义的 .navigate 。

您可以在这里看到它的小吃：https://snack.expo.io/HJuo0e5ZE

当我启动它时，出现错误消息：

设备：（3：3587）永久违反：缺少导航道具为此导航器。在react-navigation 3中，您必须设置您的应用容器直接。更多信息： https://reactnavigation.org/docs/en/app-containers.html

当我尝试应用描述的here（由createBottomTabNavigator包装到createAppContainer中）时，我开始收到一条错误消息，指出

（0，_reactNavigation.createAppContainer）不是函数（在 '（0，_reactNavigation.createAppContainer）（AppNavigator）'，'（0，_reactNavigation.createAppContainer）' 未定义）

当在createBottomTabNavigator

0 个答案: