は以下の

Question

を働いていないナビゲーションが私のコードである

（「ナビゲート（ 『登録』）」を評価）関数ではありませんこれは私のtab.js =>ここで私は、主に第1自宅での作業（3つのタブが与えられています。 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; 

これは私がそれを直接使用しますがTab.jsでそれを使用するときに実行していないのです場合Home.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画面に移動しようとしています、しかし、ここでそれは私にエラーを示します。私は彼らが正しく動作する前に、同じナビゲーション方法を使用しましたが、ここではエラーが発生します。どこが間違っているのかを教えてください。やや完了

は、それが実行されていて、ナビゲーションも動作しますが、私はそれはのようなエラーを示すTab.jsにタブビューIEでHome.jsを呼び出していたときにタブ表示に使用しないことを意味、私は他の方法でHome.jsを実行しようとしたコードの変更しますスクリーンショット。

Answer 1

内を移動使用しているので、これはmap前にする必要があり、あなたはreturn節の後に小道具からnavigateを得ています。私たちは、完全なクラスを参照してくださいする必要があり、どこがあなたのスタックナビゲーター、おそらく親を定義している

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.bind(this, navigate)} 

と

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

また、私は

012を考えます

const { navigate } = this.props.navigation; 

あなたはあなたのコードが間違っているレンダリングmap