在我立即使用
之前，从超级构造函数调用navigation.getParam时遇到问题export default class HomeBeranda extends Component {...}
但是当我更改为
class HomeBeranda extends Component {...}
并在代码末尾调用：
export default class App extends React.Component {
render () {
return <HomeBeranda />;
}
}
反而会出现错误 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 />;
}
}
这是我的错误屏幕截图： Proof:
答案 0 :(得分：0)
正如@Gonzalo所建议的那样，您正在尝试访问一个从未传递到组件中的prop。我看到您正在使用React Navigation，我强烈建议遵循其出色的getting started guide，它将引导您完成设置导航器的操作（然后将navigation道具传递给您的组件）。< / p>
答案 1 :(得分：-1)
尝试一下
export default class App extends React.Component {
render() {
return <HomeBeranda {...this.props} />;
}
}
它将为您提供帮助。