Javascript navigate.getParam不'；在react native中从构造函数调用时无法工作

在立即使用之前，从超级构造函数调用navigation.getParam时出现问题

export default class HomeBeranda extends Component {...}

但是当我换成

class HomeBeranda extends Component {...}

并在代码末尾使用以下命令调用：

export default class App extends React.Component {
   render () {
     return <HomeBeranda />;
   }
} 

导出默认类App扩展React.Component{
渲染（）{
返回；
   }
} 

相反，出现一个错误TypeError:undefined不是对象（正在评估'navigation.getParam）

这是我的完整代码：

import React, { Component } from 'react';
import { Text, View, Image, TextInput, StatusBar, TouchableOpacity, Alert, KeyboardAvoidingView, AsyncStorage, BackHandler, ImageBackground, ScrollView } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Axios from 'axios';
import Icon from 'react-native-vector-icons/Ionicons';

class HomeBeranda extends Component {

  constructor(props) {
    super(props);

    this.state = {
      akun: '',
      namapendek: '',
      email: '',
      rupiah: '',
      transaksi: '',
    }

    const { navigation } = props;
    if (navigation.getParam('akun').length > 0) {
      this.state = {
        akun: navigation.getParam('akun'),
      }
      this._callApiInfo(navigation.getParam('akun'));
    } else {
      this._showData();
    }
  }

  _showData = async () => {
    try {
      const value = await AsyncStorage.getItem('akun');
      this.setState({
        akun: value,
      });
      this._callApiInfo(value);
    } catch (error) {
      Alert.alert(error);
    }
  };

  _callApiInfo(value) {
    const paramsDatac = new URLSearchParams();
    paramsDatac.append('akun', value);
    Axios.post('http://radarugi.com/rekber/info.php', paramsDatac)
    .then(function (response) {
      const arrayHasil = JSON.stringify(response);
      const arrayLagi = JSON.parse(arrayHasil);
      this.setState({
        namapendek: arrayLagi.data.namaPendek,
        transaksi: arrayLagi.data.transaksi,
        rupiah: arrayLagi.data.rupiah,
        email: arrayLagi.data.email,
      });
      AsyncStorage.setItem('namapendek', this.state.namapendek);
      AsyncStorage.setItem('transaksi', this.state.transaksi);
      AsyncStorage.setItem('rupiah', this.state.rupiah);
      AsyncStorage.setItem('email', this.state.email);
      //Alert.alert(value);
    }.bind(this))
  }

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    this.backHandler.remove();
  }

  handleBackPress = () => {
    Alert.alert(
      'Keluar',
      'Apakah anda ingin keluar dari aplikasi?',
      [
        { text: 'Batal', onPress: () => console.log('Batal'), style: 'cancel' },
        { text: 'Ya', onPress: () => BackHandler.exitApp() },
      ],
      { cancelable: false });
    return true;
  }

  _fungsiSetAkun(data) {
    this.setState({
      akun: data,
    })
  }

  render() {
    return (
      <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
        <StatusBar backgroundColor="#EE2562" barStyle="light-content" />
        <View style={{ alignItems: 'center' }}>
          <View style={{ backgroundColor: 'white', height: 130, width: 320, borderRadius: 12, marginTop: 12, shadowColor: 'black', shadowRadius: 5, shadowOpacity: 0.7, elevation: 12 }}>
            <View style={{flex: 1}}>
              <Text style={{ fontFamily: 'BEBAS', fontSize: 40, marginLeft: 9, marginTop: 4 }}>Hai <Text style={{color: '#EE2562', fontFamily: 'BEBAS', fontSize: 40, marginLeft: 9, marginTop: 4}}>{this.state.namapendek}</Text></Text>
            </View>
            <View style={{flexDirection: 'row', flex: 1}}>
              <View style={{borderTopWidth: 1, borderRightWidth: 1, flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{fontFamily: 'BEBAS', fontSize: 33, color: '#EE2562'}}>{this.state.rupiah}</Text>
              </View>
              <View style={{borderTopWidth: 1, flex: 1, justifyContent: 'center'}}>
                <Text style={{fontFamily: 'BEBAS', fontSize: 24, color: '#EE2562', textAlign: 'center'}}>{this.state.transaksi}</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={{ backgroundColor: '#EE2562', height: 90, top: 0, right: 0, left: 0, position: 'absolute', }}>
        </View>
        <ScrollView>
        <TouchableOpacity>
          <View style={{backgroundColor: '#EE2562', marginTop: 45, height: 80, marginHorizontal: 20, borderRadius: 4, opacity: 1, shadowColor: 'black', shadowOpacity: 0.7, shadowRadius: 3, elevation: 8, justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{color: 'white', fontFamily: 'BEBAS', fontSize: 50, paddingLeft: 8}}>Bikin Rekber</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity>
          <View style={{backgroundColor: '#EE2562', marginTop: 25, height: 80, marginHorizontal: 20, borderRadius: 4, opacity: 1, shadowColor: 'black', shadowOpacity: 0.7, shadowRadius: 3, elevation: 8, justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{color: 'white', fontFamily: 'BEBAS', fontSize: 50, paddingLeft: 8}}>Join Rekber</Text>
          </View>
        </TouchableOpacity>
        <View style={{backgroundColor: 'white', borderWidth: 1, borderRadius: 3, marginTop: 30, marginHorizontal: 20, height: 200}}>
          <ScrollView>
           <Text style={{textAlign: 'left', marginTop: 4, fontSize: 17, paddingLeft: 7, color: 'black'}}>
            Panduan Singkat:
           </Text>
           <Text style={{textAlign: 'left', marginTop: 4, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            1. Penjual menekan tombol "Bikin Rekber" untuk memulai Rekber (Perlu diingat, fitur ini khusus dipakai oleh pihak Penjual)
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            2. Isi semua kolom sesuai dengan apa yang akan ditransaksikan
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            3. Ketika keluar kode Rekber, salin kode tersebut dan kasih ke Pembeli (Rahasiakan kode tersebut dari orang lain)
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            4. Pembeli menekan tombol "Join Rekber" dan masukkan kode dari Penjual
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            5. Proses Rekber sudah dimulai, saatnya Pembeli transfer dana/uang sesuai dengan nominal yang diberikan ke rekening Rekber (pihak ketiga)
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            6. Ketika sudah melakukan transfer sesuai nominal ke rekening Rekber, maka pembeli harus menekan tombol "Sudah Bayar", sistem akan mendeteksi apakah dana/uang sudah masuk ke rekening Rekber atau belum
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            7. Ketika sistem telah memverifikasi transferan pembeli, maka Penjual akan diberi pemberitahuan untuk memberikan barang/akun (jualan nya) ke Pembeli
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            8. Setelah memberikan barang/akun (jualan nya) tersebut ke Pembeli, Penjual harus menekan tombol "Barang Dikirim"
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            9. Pembeli harus memastikan barang/akun yang diberi oleh Penjual sesuai dengan apa yang ia inginkan. Jika sudah sesuai, maka Pembeli harus menekan tombol "Barang Diterima"
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            10. Setelah Pembeli menekan tombol "Barang Diterima", sistem kami akan mengirim dana/uang sesuai nominal ke rekening milik Penjual
           </Text>
          </ScrollView>
        </View>
        </ScrollView>
        <View style={{ backgroundColor: 'white', height: 60, bottom: 0, right: 0, left: 0, position: 'absolute', shadowColor: 'black', shadowRadius: 9, shadowOpacity: 0.7, elevation: 10, flexDirection: 'row'}}>
          <TouchableOpacity style={{flex:1}}>
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Icon name="md-home" size={40} color="#EE2562"/>
              <Text style={{fontFamily: "BEBAS", color: "#EE2562"}}>Home</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={{flex:1}}>
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Icon name="md-list-box" size={40} color="black"/>
              <Text style={{fontFamily: "BEBAS", color: "black"}}>History</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={{flex:1}}>
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Icon name="md-person" size={40} color="black"/>
              <Text style={{fontFamily: "BEBAS", color: "black"}}>Account</Text>
            </View>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

export default class App extends React.Component {
  render() {
    return <HomeBeranda />;
  }
}

import React，{Component}来自'React'；
从“react native”导入{Text，View，Image，TextInput，StatusBar，TouchableOpacity，Alert，KeyboardAvoidingView，AsyncStorage，BackHandler，ImageBackground，ScrollView}；
从“react navigation”导入{createAppContainer}；
从“反应导航堆栈”导入{createStackNavigator}；
从“Axios”导入Axios；
从“反应本机矢量图标/离子图标”导入图标；
类HomeBeranda扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
阿肯：“，
纳马彭德克：，
电子邮件：“”，
卢比：，
transaksi:“，
}
const{navigation}=props；
if（navigation.getParam（'akun'）。长度>0）{
此.state={
akun:navigation.getParam（'akun'），
}
这个._callapinfo（navigation.getParam（'akun'））；
}否则{
这个。_showData（）；
}
}
_showData=async（）=>{
试一试{
const value=await AsyncStorage.getItem（'akun'）；
这是我的国家({
阿肯：价值观，
});
此._callapinfo（值）；
}捕获（错误）{
警报。警报（错误）；
}
};
_callApiInfo（值）{
const paramsDatac=新的URLSearchParams（）；
paramsDatac.append（'akun'，值）；
轴心柱http://radarugi.com/rekber/info.php，paramsDatac）
.然后（功能（响应）{
const arrayHasil=JSON.stringify（响应）；
const arrayLagi=JSON.parse（arrayHasil）；
这是我的国家({
namapendek:arrayLagi.data.namapendek，
transaksi:arrayLagi.data.transaksi，
卢比：arrayLagi.data.rupiah，
电子邮件：arrayLagi.data.email，
});
AsyncStorage.setItem（'namapendek'，this.state.namapendek）；
AsyncStorage.setItem（'transaksi'，this.state.transaksi）；
AsyncStorage.setItem（'rupiah'，this.state.rupiah）；
AsyncStorage.setItem（'email'，this.state.email）；
//警报。警报（值）；
}.绑定（本）
}
componentDidMount（）{
this.backHandler=backHandler.addEventListener（'hardwareBackPress'，this.handleBackPress'）；
}
组件将卸载（）{
this.backHandler.remove（）；
}
车把靠背压力=（）=>{
警惕，警惕(
“凯鲁尔”，
“你是不是有一天会回来？”，
[
{text:'Batal'，onPress:（）=>console.log（'Batal'），style:'cancel'}，
{text:'Ya'，onPress:（）=>BackHandler.exitApp（）}，
],
{可取消：false}）；
返回true；
}
_fungsiSetAkun（数据）{
这是我的国家({
阿肯：数据，
})
}
render（）{
返回(
Hai{this.state.namapendek}
{this.state.rupiah}
{this.state.transaksi}
比金雷克伯
加入雷克伯
潘杜安辛卡特：
1.我们可以通过“比金热”来满足人们对热的需求（当然，这是一个很好的开端）
2.Isi semua kolom sesuai将成为一个可持续的发展目标
3.科德·雷克伯、塞林·科德和凯西·科德·佩姆贝利（Rahasikan kode-Lekber）是一位年轻人
4.Pembeli在“加入Rekber”和“加入Penjual”方面取得了成功
5.在未来几年内，转让协议/转让协议的名义价值（包括转让协议）
6.如果要实现名义上的可再生能源转让，就必须在“可再生能源”的基础上，建立一个可持续发展的体系
7.如果该系统能够有效地进行转让，那么它将有可能成为一家公司的成员
8.尽管胡安·尼娅（jualan nya）的名字在佩姆贝里（Pembeli）是如此，但胡安·尼娅（jualan nya）必须用“自己的名字”来形容自己
9.佩姆贝里必须努力实现可持续发展目标。如果要实现这一目标，佩姆贝里必须努力实现“可持续发展”目标
10.如果该机构能够实现“可持续发展”目标，那么该系统将能够实现可持续发展
家
历史
账户
);
}
}
导出默认类App扩展React.Component{
render（）{
回来
}
}

这是我的错误截图：

---

正如@Gonzalo所建议的，您正在尝试访问一个从未传递到组件中的

道具。我看到您正在使用React导航，我强烈建议您遵循他们的优秀做法，这将引导您完成导航器的设置（然后将
导航
道具传递给您的组件）。
试试看
  export default class App extends React.Component {
    render() {
       return <HomeBeranda {...this.props} />;
        }
      }