加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React Native学习笔记-2:this.props.navigator undefined

发布时间:2020-12-15 04:39:40 所属栏目:百科 来源:网络整理
导读:源码如下: 'use strict' ; import React,{ AppRegistry,Component,StyleSheet,Text,View,ScrollView,PixelRatio,NavigatorIOS,TextInput,} from 'react-native' ; class HelloWorld extends Component { render() { return ( NavigatorIOS style = {styles.

源码如下:

'use strict';
import React,{
  AppRegistry,Component,StyleSheet,Text,View,ScrollView,PixelRatio,NavigatorIOS,TextInput,} from 'react-native';

class HelloWorld extends Component {
  render() {
    return (
      <NavigatorIOS style = {styles.flex} initialRoute = {
        {
          component: NavigatorRouteView,title: 'Hi',passProps: {},}
      } />
    );
  }
}

class NavigatorRouteView extends Component {
  jumpTo() {
    // alert(this.props.navigator);**(1)**
    // alert(this);
    this.props.navigator.push({
      component: NavigatorDetailView,title: 'Detail Info',rightButtonTitle: 'Shopping',});
  }
  render() {
    return (
      <ScrollView style = {styles.flex}>
        <View style = {styles.item}>
          <Text style = {styles.list_font} onPress = {this.jumpTo}/*3*/>HelloWorld</Text>
        </View>
      </ScrollView>
    );
  }
}

class NavigatorDetailView extends Component {
  render() {
    return (
      <View style = {{flex: 1,backgroundColor: 'red'}}></View>
    );
  }
}
const styles = StyleSheet.create({

  list_font: {
    fontSize: 16,},item: {
    flex: 1,// borderWidth: 1,
    // borderColor: 'blue',
    height: 80,flex: {
    flex: 1,font: {
    fontSize: 20,color: '#fff',fontWeight: 'bold',});

AppRegistry.registerComponent('HelloWorld',() => HelloWorld);

点击界面跳转到下一级界面无反应,放开注释一处的代码:

alert(this.props.navigator);

则给出undefined的错误信息,而打印this.props同样给出undefined错误信息,经查询,错误处在点击方法绑定上:

onPress = {this.jumpTo}

修改为:

onPress = {this.jumpTo.bind(this)}

即可,参考:
“React Native,undefined is not an object (evaluating ‘this.props.navigator.push’)”

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读