不確定是不是一個函數（評估「導航（‘註冊’）」）導航不工作

Question

下面是我的代碼

這是我tab.js =>在這裏，我給出的三個選項卡（主要是工作中的第一家。 JS）

import React, { PureComponent } from 'react'; 
    import { Animated, StyleSheet,View } from 'react-native'; 
    import { TabViewAnimated, TabBar } from 'react-native-tab-view'; 
    import { StackNavigator } from 'react-navigation'; 
    import Qwerty from './Qwerty'; 
    import Home from './Home'; 
    //import Login from './Login' 

    import type { NavigationState } from 'react-native-tab-view/types'; 

    type Route = { 
    key: string, 
    title: string, 
    }; 

    type State = NavigationState<Route>; 

    class Tab extends PureComponent<void, *, State> { 

    static navigationOptions = { 
     header: null 
    }; 

    state: State = { 
     index: 0, 
     routes: [ 
     { key: '1', title: 'Home' }, 
     { key: '2', title: 'Shops' }, 
     { key: '3', title: 'Bookmark' }, 
     ], 
    }; 

    _first: Object; 
    _second: Object; 
    _third: Object; 

    _handleIndexChange = index => { 
     this.setState({ 
     index, 
     }); 
    }; 

    _renderLabel = props => ({ route, index }) => { 
     const inputRange = props.navigationState.routes.map((x, i) => i); 
     const outputRange = inputRange.map(
     inputIndex => (inputIndex === index ? '#fff' : '#222') 
    ); 
     const color = props.position.interpolate({ 
     inputRange, 
     outputRange, 
     }); 

     return (
     <View> 
      <Animated.Text style={[styles.label, { color }]}> 
      {route.title} 
      </Animated.Text> 
     </View> 
    ); 
    }; 

    _renderHeader = props => { 
     return (
     <TabBar 
      {...props} 
      pressColor="#999" 
     // onTabPress={this._handleTabItemPress} 
      renderLabel={this._renderLabel(props)} 
      indicatorStyle={styles.indicator} 
      tabStyle={styles.tab} 
      style={styles.tabbar} 
     /> 
    ); 
    }; 

    _renderScene = ({ route }) => { 
     switch (route.key) { 
     case '1': 
      return (
      <Home 
       ref={el => (this._first = el)} 
       style={[styles.page, { backgroundColor: '#E3F4DD' }]} 
      /> 
     ); 
     case '2': 
      return (
      <Qwerty 
       ref={el => (this._second = el)} 
       style={[styles.page, { backgroundColor: '#E6BDC5' }]} 
       initialListSize={1} 
      /> 
     ); 
     case '3': 
      return (
      <Qwerty 
       ref={el => (this._third = el)} 
       style={[styles.page, { backgroundColor: '#EDD8B5' }]} 
       initialListSize={1} 
      /> 
     ); 
     default: 
      return null; 
     } 
    }; 

    render() { 
     return (

     <TabViewAnimated 
      style={[styles.container, this.props.style]} 
      navigationState={this.state} 
      renderScene={this._renderScene} 
      renderHeader={this._renderHeader} 
      onIndexChange={this._handleIndexChange} 
     // onRequestChangeTab={this._handleIndexChange} 
      lazy 
     /> 
    ); 
    } 
    } 

    const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
    }, 
    indicator: { 
     backgroundColor: '#fff', 
    }, 
    label: { 
     fontSize: 18, 
     fontWeight: 'bold', 
     margin: 8, 
    }, 
    tabbar: { 
     backgroundColor: '#ff6600', 
    }, 
    tab: { 
     opacity: 1, 
     // width: 140, 
    }, 
    page: { 
     backgroundColor: '#f9f9f9', 

    }, 
    }); 

    export default Tab; 

這是Home.js =>它運行良好，如果我使用它在Tab.js使用時直接但沒有運行。

GoPressed(navigate){ 
    navigate("Register"); 
} 


render() { 
    const { navigate } = this.props.navigation; 
    contents = this.state.qwerty.data.map((item) => { 
     return (
      <View> 
       {item.p1.shareproductid ? <TouchableHighlight onPress={() => this.GoPressed(navigate)} style={styles.button}> 
        <Text style={styles.buttonText}> 
        Go 
        </Text> 
       </TouchableHighlight> : null } 

      <Text> 
       {item.p1.content} 
      </Text> 
      </View> 
     ); 
    }); 
    return (
     <ScrollView style={styles.container}> 
     {contents} 
     </ScrollView> 
    ); 
    } 

我想之後按下按鈕Go屏幕Register上瀏覽，但在這裏它顯示了我的錯誤。在他們正常工作之前，我使用了相同的導航方法，但在這裏給出了錯誤。請說明我要去哪裏？

有點作的修改在我嘗試了另一種方式運行Home.js代碼意味着不使用標籤視圖則運行和導航也適用，但是當我在標籤視圖即Tab.js調用Home.js則顯示爲錯誤屏幕截圖。

Answer 1

內，您的渲染代碼不正確，你是從道具return子句後得到navigate這應該是map之前。

試試這個：

render() { 
    const { navigate } = this.props.navigation; 
    contents = this.state.qwerty.data.map((item) => { 

    return (
     <View> 
      {item.p1.shareproductid ? <TouchableHighlight onPress={() => this.GoPressed(navigate)} style={styles.button}> 
       <Text style={styles.buttonText}> 
        Go 
       </Text> 
       </TouchableHighlight> : null } 

      <Text> 
      {item.p1.content} 
      </Text> 
     </View> 
    ); 
    }); 
    return (
    <ScrollView style={styles.container}> 
     {contents} 
    </ScrollView> 
); 
} 

Answer 2

改變這一狀況，

onPress={() => this.GoPressed(navigate)} 

與此

onPress={() => { this.GoPressed(navigate) }} 

或本

onPress={this.GoPressed.bind(this, navigate)} 

而且我覺得

const { navigate } = this.props.navigation; 

，因爲你正在使用導航map