Question

我使用了this.props.maps和this.props.navigation来显示错误：

this.props.navigation.navigate是未定义的对象

尝试通过渲染firebase数据库来导航到另一个页面，但是出现错误，但是我通过简单地创建视图并导航到另一个页面然后尝试正常运行的相同代码

export default class ItemComponent extends Component {


  constructor(props) {
    super(props);
    // need to bind `this` to access props in handler
    this._onEditLibrary = this._onEditLibrary.bind(this);
  }

  static propTypes = {
      items: PropTypes.array.isRequired
  };
  _onEditLibrary=()=> {
    this.props.navigation.navigate('EditLibrary');
  };
  render() {
    return (
      <View style={styles.itemsList}>
          <TouchableOpacity  onPress={this._onEditLibrary}>
        {this.props.items.map((item, index) => {
            return (
                <View key={index}>

                <ImageBackground source={item.Image} style={ { height:150, width:150}}>
                    <Text style={styles.itemtext}>{item.Name}</Text>
                    </ImageBackground>

                </View>
            )
        })
        }
        </TouchableOpacity>
      </View>
    );
  }
}

需要导航到另一个页面

Answer 1

尝试一下

export default class ItemComponent extends Component {


  constructor(props) {
    super(props);
    // need to bind `this` to access props in handler
    this._onEditLibrary = this._onEditLibrary.bind(this);
  }

  static propTypes = {
      items: PropTypes.array.isRequired
  };
  _onEditLibrary=()=> {
    this.props.navigation.navigate('EditLibrary');
  };
  render() {
    return (
      <View style={styles.itemsList}>
        {this.props.items.map((item, index) => {
            return (
                <TouchableOpacity key={index} onPress={this._onEditLibrary}>
                    <ImageBackground source={item.Image} style={ { height:150, width:150}}>
                           <Text style={styles.itemtext}>{item.Name}</Text>
                    </ImageBackground>
              </TouchableOpacity>
            )
        })
        }
      </View>
    );
  }
}

我们可以在单个类中使用this.props.map以及this.props.navigation导航到另一个屏幕吗

1 个答案: