Question

我一直在使用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)

此方法会产生下一个错误

必须有一些我缺少的东西，我知道这个.props.navigator并非未定义，但在_onAlertTypePressed内部导航器道具未定义。

Answer 1

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

你应该通过：

this._onAlertTypePressed.bind(this);

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

constructor(props) {
  this._onAlertTypePressed = this._onAlertTypePressed.bind(this);
}

Answer 2

我之前也曾经发生过这种情况。

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

render() {

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

然后在调用_onAlertTypePressed

时传递导航器

() => _onAlertTypePressed(navigator)

然后在_onAlertTypePressed

中使用navigator vs this.props.navigator

导航到按下平面列表项目中的另一个屏幕

2 个答案: