반응 네이티브에서 부모에게 props.navigator를 전달하십시오.

Question

다른 네비게이션을 탐색하기 위해 반응 네이티브 사이드 메뉴를 사용하는 데 문제가 있습니다. 주로 NavigatorIOS가 SideMenu 안에 있기 때문에 props.navigator가 존재하지 않는다고 생각합니다. NavigatorIOS가 렌더링됩니까?

주요 코드 : 보시다시피, 나는에서 props.navigator 속성을 갖 메뉴 및 홈 장면에서 탐색을 처리하는 동일한 코드를 사용하지만, NavigatorIOS에 의해 렌더링 홈 페이지에

class HomeScene extends Component{ 
    static title = 'Home'; 

    constructor(props){ 
    super(props); 
    this.state={ 
     title:'Home' 
    }; 
    } 

    render(){ 
    return (
     <View style={styles.defaultContainer}> 
      <Text style={styles.defaultText}> 
       You are on the Home Page 
      </Text> 
      <View style={styles.group}> 
      {this._renderRow("To another page",() => { 
       this.props.navigator.push({ 
       title: Page.title, 
       component: Page, 
       passProps: {depth: this.props.depth ? this.props.depth + 1 : 1}, 
       onLeftButtonPress:() => this.props.navigator.pop(), 
       }); 
      })} 
      </View> 
     </View> 
    ); 
    } 

    _renderRow = (title: string, onPress: Function) => { 
    return (
     <View> 
     <TouchableHighlight onPress={onPress}> 
      <View style={styles.row}> 
      <Text style={styles.rowText}> 
       {title} 
      </Text> 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    }; 
} 

class Menu extends Component{ 
    constructor(props){ 
    super(props); 
    } 

    static propTypes={ 
    onItemSelected: React.PropTypes.func.isRequired, 
    }; 

    _renderRow = (title: string, onPress: Function) => { 
    return (
     <View> 
     <TouchableHighlight onPress={onPress}> 
      <View style={styles.row}> 
      <Text style={styles.rowText}> 
       {title} 
      </Text> 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    }; 

    render(){ 
    return(
     <ScrollView scrollsToTop={false} style={styles.sideMenuBar}> 
     {this._renderRow("Home", function(){ 
      this.props.navigator.replace({ 
      title: 'Home', 
      component: HomeScene, 
      passProps: {depth: this.props.depth ? this.props.depth + 1 : 1}, 
      onLeftButtonPress:() => this.props.navigator.pop(), 
      }); 
     })} 

     {this._renderRow("Page", function(){ 
      this.props.navigator.replace({ 
      title: 'Page', 
      component: Page, 
      passProps: {depth: this.props.depth ? this.props.depth + 1 : 1}, 
      onLeftButtonPress:() => this.props.navigator.pop(), 
      }); 
     })} 
     </ScrollView> 
     ) 
     } 
} 


class App extends Component { 
    render() { 
     const menu = <Menu onItemSelected={this.onMenuItemSelected} navigator={this.props.navigator}/>; <--- will be undefined 
     return (
       <SideMenu 
       menu={menu} 
       isOpen={this.state.isMenuSideBarOpen} 
       onChange={(isOpen)=>{this.updateMenuState(isOpen)}} 
       > 
       <StatusBar 
       backgroundColor="blue" 
       barStyle="light-content" 
       /> 
       <NavigatorIOS 
       initialRoute={{ 
        component: HomeScene, 
        title: this.state.selectedItem, 
        leftButtonIcon: this.state.menuIcon, 
        onLeftButtonPress:()=>{ 
        this.toggle(); 
        } 
       }} 
       style={{flex: 1}} 
       tintColor="#FFFFFF" 
       titleTextColor="#FFFFFF" 
       barTintColor='#000099' 
       > 
       </NavigatorIOS> 
      </SideMenu> 
     ); 
    } 
    } 
} 

다른 손으로, 메뉴에서 홈 버튼을 클릭하면 오류가 발생합니다. props.navigator는 정의되지 않았습니다.

어떻게 해결해야합니까? 내 코드의 문제점은 무엇입니까? 나는 네이티브 반응의 신선한 학습자이며, 다른 컴포넌트를 올바른 방법으로 어떻게 랩핑해야하는지에 대해 여전히 혼란 스럽다.

여기 source file

Answer 1

가장 쉬운 방법은 경로에 this.props.navigator를 추가하는 것입니다, 더 나은 전망을합니다. 그래서 같은 :

{this._renderRow("To another page",() => { 
       this.props.navigator.push({ 
       navigator: this.props.navigator 
       title: Page.title, 
       component: Page, 
       passProps: { 
        depth: this.props.depth ? this.props.depth + 1 : 
         1}, 
        onLeftButtonPress:() => 
         this.props.route.navigator.pop() 
       }); 
      })} 

그런 다음 this.props.route.navigator를 사용하여 경로에서 네비게이터에 액세스 할 수 있어야합니다. App은 루트 구성 요소와 같으며 나머지 부분보다 먼저 렌더링됩니다.

저는 NavigatorIOS에 익숙하지 않지만 renderScene 기능을 재정의 할 수있는 방법이 더 좋은 방법 일 것입니다. 그 기능으로 렌더링 된 하위에 navigator 소품 만 지정하면됩니다.