0

我一直在使用 wix/react-native-navigation 包在屏幕之间导航并正确处理堆栈。

跨屏幕移动非常简单，当按下按钮时触发这些转换。但是当我有一个 FlatList 并且当用户从列表中点击一个项目时我想推送到一个新屏幕时，问题就出现了，看起来像在开始时注入的导航器道具丢失或在另一个上下文中而不是 onPress 回调事件；

这是示例代码

class AlertType extends React.PureComponent {
  _onPress = () => {
      this.props.onPressItem(this.props.itemId, this.props.itemName, this.props.itemImageUrl);
  };

  render() {
      return (
          <TouchableOpacity { ...this.props }
              onPress={ this._onPress }
              style={ itemStyle.cardContainer }>

              <View style={ itemStyle.mainContainer }>
                  <View style={{ width: 10 }}/>
                  <Image
                      source={{ uri: NET.HOST + this.props.itemImageUrl }}
                      style={{ width: 45, height: 45 }}
                  />
                  <View style={{ width: 10 }}/>
                  <Text style={ itemStyle.itemText }>{ this.props.itemName }</Text>
              </View>
          </TouchableOpacity>
      );
  }
}

class AlertsScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            alertTypes: null,
        }
    }

    _onAlertTypePressed(typeId: string, typeName: string, imageUrl: string){

        this.props.navigator.push({
            screen: 'prod.screens.AlertsCreator',
            title: 'Alert',
            passProps: {
                alertId: typeId,
                alertName: typeName,
                alertImage: imageUrl
            }
        });
    }

    _renderListItem = ({ item }) => (
        <AlertType
            itemName={ item.titulo }
            itemId={ item.key }
            itemImageUrl={ item.url }
            onPressItem={ this._onAlertTypePressed }
        />
    );

    render() {
        return (
            <View style={ styles.mainContainer }>
                <FlatList
                    data={ this.state.alertTypes }
                    ItemSeparatorComponent={ () => <View style={{ height: 5 }}/> }
                    renderItem={ this._renderListItem }
                />
            </View>
        );
    }

const mapSessionStateToProps = (state, ownProps) => {
    return {
        session: state.session
    };
}
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    };
}
export default connect(mapSessionStateToProps, mapDispatchToProps)(AlertsScreen)

这种方法产生下一个错误 在此处输入图像描述

必须有一些我错过的东西，我知道 this.props.navigator 不是未定义的，但_onAlertTypePressed导航器道具内部是未定义的。

4

2 回答 2

1

问题是您将函数传递给组件而不将其绑定到当前上下文。

你应该通过：

this._onAlertTypePressed.bind(this);

另一种方法是在构造函数中绑定你的函数：

constructor(props) {
  this._onAlertTypePressed = this._onAlertTypePressed.bind(this);
}
于 2018-03-29T14:50:57.703 回答
0

我以前也遇到过这种情况。

我必须在渲染和返回块之间声明导航器

render() {

const navigator = this.props.navigator
return()}}

然后在调用 _onAlertTypePressed 时通过导航器

() => _onAlertTypePressed(navigator)

然后在 _onAlertTypePressed 中使用 navigator vs this.props.navigator

于 2018-03-24T00:33:50.257 回答