реагируют родной: не определено не является объектом (оценка «_this.props.navigator.push»)

Question

----- Обратите внимание на мой выбор в конце -----

Я только начал! с реакцией-родной, и у меня проблемы с навигатором.

(я использовал этот пример в качестве шаблона: https://github.com/h87kg/NavigatorDemo)

Первый экран (Main) работает нормально, но при попытке .С к другому он дает мне следующую ошибку:

неопределенную не является объектом (оценка '_this.props.navigator.push')

Главная:

render() { 
    return (
     <Navigator 
     style={styles.container} 
     initialRoute={{ name: 'Main' }} 
     renderScene={ this.renderScene.bind(this) } 
     /> 
    ); 
    } 

    renderScene = (route, navigator) => { 
    if(route.name == 'Main') { 
    return (
     <TouchableHighlight onPress={() => this._navigate() }> 
     <Text>GO To View</Text> 
     </TouchableHighlight> 
    ); 
    } 
    if(route.name == 'Home') { 
     return <Home navigator={navigator} /> 
    } 
    } 

    _navigate =() => { 
    this.props.navigator.push({ 
     name: 'Home', 
    }) 
    } 

Home просто отображает текст в его renderScene:

render() { 
    return (
     <Navigator 
     renderScene={ this.renderScene.bind(this) } 
     navigator={this.props.navigator} 
     /> 
    ); 
    } 

    renderScene(route, navigator){ 
    return(
     <View style={styles.container}> 
     <Text> 
      2nd Screen! 
     </Text> 
     </View> 
    ) 
    } 

Edit: Я пытался this._navigate().bind(this), но до сих пор не работает

Так, this.props.navigator никогда не определен, но, как и где я могу определить?

Answer 1

Попробуйте привязки метод _navigate к правильному контексту объекта в constructor класса:

class myComponent extends Component { 
    constructor() { 
    this._navigate = this._navigate.bind(this); 
    } 

    // NOTE body ... 
}; 

Answer 2

Причина вы не можете ссылаться на ваш навигатор от вашей функции обратного вызова, потому что действие было сгенерировано из другого контекста чем ваш текущий компонент.

Я столкнулся с аналогичной проблемой, используя FlatList Компонент. Я приведу пример для тех, кто может столкнуться с этой проблемой в будущем.

export default class AlertsScreen extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     alertTypes: [{ key: 'type1', name: 'Alert 1'}, { key: 'type2', name: 'Alert 2'}], 
    } 
    navigator = this.props.navigator; 
} 

_onAlertTypePressed(typeId: string, typeName: string){ 
    navigator.push({ 
     screen: 'foo.bar.AlertsCreator', 
     title: 'Alert', 
     passProps: { alertId: typeId } 
}); 

} 

В приведенном выше примере, я получить ссылку из объекта навигатора, а затем использовать его, чтобы толкать новый экран, когда пользователь нажимает элемент из FlatList.

ПРИМЕЧАНИЕ: Использование Wix/React-native-navigation