我迭代list并尝试为每个元素传递id参数并链接到详细信息屏幕：
_renderList = ({ item }) => {
return (
<TouchableWithoutFeedback onPress={(event) => this._selectedItem(item.key)}>
<View style={styles.listRowContainer}>
<View style={styles.listinside1Container}>
<Image style={styles.listImage} source={item.icon} />
<View style={styles.listContainer} onPress={(event) => this._selectedItem(item.text)} >
<Text onPress={ ()=> this.props.navigation.navigate('FontsTab', { id: item.id }) } style={styles.listHeader} >
{item.title}
</Text>
<Text style={styles.listValue} >{item.value}</Text>
<Image
style={{width: 50, height: 50}}
source={{uri: item.img}}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
}
在详细信息屏幕中，我尝试阅读id参数，但它不起作用。我做错了什么？
我尝试阅读的代码是：
getNavigationParams() {
return this.props.navigation.state.params || {}
}
我得到的错误
TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params.id')
This error is located at:
in Fonts (at fonts.js:12)
in FontsTabView (at SceneView.js:17)
in SceneView (at CardStack.js:455)
in RCTView (at View.js:78)
in View (at CardStack.js:454)
in RCTView (at View.js:78)
in View (at CardStack.js:453)
in RCTView (at View.js:78)
in View (at createAnimatedComponent.js:147)
in AnimatedComponent (at Card.js:12)
in Card (at PointerEventsContainer.js:39)
in Container (at CardStack.js:498)
in RCTView (at View.js:78)
in View (at CardStack.js:414)
in RCTView (at View.js:78)
in View (at CardStack.js:413)
in CardStack (at CardStackTransitioner.js:67)
in RCTView (at View.js:78)
in View (at Transitioner.js:142)
in Transitioner (at CardStackTransitioner.js:19)
in CardStackTransitioner (at StackNavigator.js:41)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at SceneView.js:17)
in SceneView (at ResourceSavingSceneView.js:55)
in RCTView (at View.js:78)
in View (at ResourceSavingSceneView.js:48)
in RCTView (at View.js:78)
in View (at ResourceSavingSceneView.js:39)
in ResourceSavingSceneView (at TabView.js:35)
in RCTView (at View.js:78)
in View (created by ViewPagerAndroid)
in AndroidViewPager (at ViewPagerAndroid.android.js:238)
in ViewPagerAndroid (at TabViewPagerAndroid.js:127)
in TabViewPagerAndroid (at TabViewAnimated.js:71)
in RCTView (at View.js:78)
in View (at TabViewAnimated.js:194)
in TabViewAnimated (at TabView.js:192)
in TabView (at withCachedChildNavigation.js:69)
in withCachedChildNavigation(TabView) (at TabNavigator.js:34)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at SceneView.js:17)
in SceneView (at DrawerScreen.js:21)
in DrawerScreen (at withCachedChildNavigation.js:69)
in withCachedChildNavigation(DrawerScreen) (at DrawerNavigator.js:71)
in Unknown (at createNavigator.js:13)
in Navigator (at DrawerView.js:178)
in RCTView (at View.js:78)
in View (at DrawerLayoutAndroid.android.js:186)
in AndroidDrawerLayout (at DrawerLayoutAndroid.android.js:200)
in DrawerLayoutAndroid (at DrawerView.js:158)
in DrawerView (at DrawerNavigator.js:88)
in Unknown (at createNavigator.js:13)
in Navigator (at createNavigationContainer.js:226)
in NavigationContainer (at renderApplication.js:35)
in RCTView (at View.js:78)
in View (at AppContainer.js:102)
in RCTView (at View.js:78)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
render
C:\Users\datan\react-native-init\koolbusiness\src\views\fonts_home.js:360:79
proxiedMethod
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-proxy\modules\createPrototypeProxy.js:44:35
finishClassComponent
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8707:21
updateClassComponent
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8675:6
beginWork
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:9376:10
performUnitOfWork
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11771:25
workLoop
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11839:43
invokeGuardedCallback
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:39:15
invokeGuardedCallback
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:221:34
renderRoot
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11925:30
performWorkOnRoot
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12742:34
performWork
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12660:26
performSyncWork
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12622:16
requestWork
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12535:6
scheduleWorkImpl
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12374:22
scheduleWork
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12321:28
enqueueSetState
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:6388:19
setState
C:\Users\datan\react-native-init\koolbusiness\node_modules\react\cjs\react.development.js:241:31
<unknown>
C:\Users\datan\react-native-init\koolbusiness\src\views\fonts_home.js:336:30
tryCallOne
C:\Users\datan\react-native-init\koolbusiness\node_modules\promise\setimmediate\core.js:37:14
<unknown>
C:\Users\datan\react-native-init\koolbusiness\node_modules\promise\setimmediate\core.js:123:25
<unknown>
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:297:23
_callTimer
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:154:6
_callImmediatesPass
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:202:17
callImmediates
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:466:11
__callImmediates
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:329:4
<unknown>
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:147:6
__guardSafe
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:316:6
flushedQueue
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:146:17
invokeCallbackAndReturnFlushedQueue
C:\Users\datan\react-native-init\koolbusiness\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:11
详细
import React, { Component } from 'react';
import {
View,
ScrollView,
StyleSheet,
Platform,
Image,
TouchableHighlight, ListView,ActivityIndicator
} from 'react-native';
import { Text, Card, Divider, Icon } from 'react-native-elements';
const iOS_fonts = [
'Academy Engraved LET',
'AcademyEngravedLetPlain',
'Al Nile',
'AlNile-Bold',
'American Typewriter',
'AmericanTypewriter-Bold',
'AmericanTypewriter-Condensed',
'AmericanTypewriter-CondensedBold',
'AmericanTypewriter-CondensedLight',
'AmericanTypewriter-Light',
'Apple Color Emoji',
'AppleColorEmoji',
'Apple SD Gothic Neo',
'AppleSDGothicNeo-Bold',
'AppleSDGothicNeo-Light',
'AppleSDGothicNeo-Medium',
'AppleSDGothicNeo-Regular',
'AppleSDGothicNeo-SemiBold',
'AppleSDGothicNeo-Thin',
'AppleSDGothicNeo-UltraLight',
'Arial',
'Arial Hebrew',
'Arial Rounded MT Bold',
'Arial-BoldItalicMT',
'Arial-BoldMT',
'Arial-ItalicMT',
'ArialHebrew',
'ArialHebrew-Bold',
'ArialHebrew-Light',
'ArialMT',
'ArialRoundedMTBold',
'Avenir',
'Avenir-Black',
'Avenir-BlackOblique',
'Avenir-Book',
'Avenir-BookOblique',
'Avenir-Heavy',
'Avenir-HeavyOblique',
'Avenir-Light',
'Avenir-LightOblique',
'Avenir-Medium',
'Avenir-MediumOblique',
'Avenir-Oblique',
'Avenir-Roman',
'Avenir Next',
'Avenir Next Condensed',
'AvenirNext-Bold',
'AvenirNext-BoldItalic',
'AvenirNext-DemiBold',
'AvenirNext-DemiBoldItalic',
'AvenirNext-Heavy',
'AvenirNext-HeavyItalic',
'AvenirNext-Italic',
'AvenirNext-Medium',
'AvenirNext-MediumItalic',
'AvenirNext-Regular',
'AvenirNext-UltraLight',
'AvenirNext-UltraLightItalic',
'AvenirNextCondensed-Bold',
'AvenirNextCondensed-BoldItalic',
'AvenirNextCondensed-DemiBold',
'AvenirNextCondensed-DemiBoldItalic',
'AvenirNextCondensed-Heavy',
'AvenirNextCondensed-HeavyItalic',
'AvenirNextCondensed-Italic',
'AvenirNextCondensed-Medium',
'AvenirNextCondensed-MediumItalic',
'AvenirNextCondensed-Regular',
'AvenirNextCondensed-UltraLight',
'AvenirNextCondensed-UltraLightItalic',
'Bangla Sangam MN',
'Baskerville',
'Baskerville-Bold',
'Baskerville-BoldItalic',
'Baskerville-Italic',
'Baskerville-SemiBold',
'Baskerville-SemiBoldItalic',
'Bodoni 72',
'Bodoni 72 Oldstyle',
'Bodoni 72 Smallcaps',
'Bodoni Ornaments',
'BodoniOrnamentsITCTT',
'BodoniSvtyTwoITCTT-Bold',
'BodoniSvtyTwoITCTT-Book',
'BodoniSvtyTwoITCTT-BookIta',
'BodoniSvtyTwoOSITCTT-Bold',
'BodoniSvtyTwoOSITCTT-Book',
'BodoniSvtyTwoSCITCTT-Book',
'Bradley Hand',
'BradleyHandITCTT-Bold',
'Chalkboard SE',
'ChalkboardSE-Bold',
'ChalkboardSE-Light',
'ChalkboardSE-Regular',
'Chalkduster',
'Cochin',
'Cochin-Bold',
'Cochin-BoldItalic',
'Cochin-Italic',
'Copperplate',
'Copperplate-Bold',
'Copperplate-Light',
'Courier',
'Courier New',
'Courier-Bold',
'Courier-BoldOblique',
'Courier-Oblique',
'CourierNewPS-BoldItalicMT',
'CourierNewPS-BoldMT',
'CourierNewPS-ItalicMT',
'CourierNewPSMT',
'Damascus',
'DamascusBold',
'DamascusLight',
'DamascusMedium',
'DamascusSemiBold',
'Devanagari Sangam MN',
'DevanagariSangamMN',
'DevanagariSangamMN-Bold',
'Didot',
'Didot-Bold',
'Didot-Italic',
'DiwanMishafi',
'Euphemia UCAS',
'EuphemiaUCAS-Bold',
'EuphemiaUCAS-Italic',
'Farah',
'Futura',
'Futura-CondensedExtraBold',
'Futura-CondensedMedium',
'Futura-Medium',
'Futura-MediumItalic',
'Geeza Pro',
'GeezaPro-Bold',
'Georgia',
'Georgia-Bold',
'Georgia-BoldItalic',
'Georgia-Italic',
'Gill Sans',
'GillSans-Bold',
'GillSans-BoldItalic',
'GillSans-Italic',
'GillSans-Light',
'GillSans-LightItalic',
'GillSans-SemiBold',
'GillSans-SemiBoldItalic',
'GillSans-UltraBold',
'Gujarati Sangam MN',
'GujaratiSangamMN',
'GujaratiSangamMN-Bold',
'Gurmukhi MN',
'GurmukhiMN-Bold',
'Heiti SC',
'Heiti TC',
'Helvetica',
'Helvetica Neue',
'Helvetica-Bold',
'Helvetica-BoldOblique',
'Helvetica-Light',
'Helvetica-LightOblique',
'Helvetica-Oblique',
'HelveticaNeue-Bold',
'HelveticaNeue-BoldItalic',
'HelveticaNeue-CondensedBlack',
'HelveticaNeue-CondensedBold',
'HelveticaNeue-Italic',
'HelveticaNeue-Light',
'HelveticaNeue-LightItalic',
'HelveticaNeue-Medium',
'HelveticaNeue-MediumItalic',
'HelveticaNeue-Thin',
'HelveticaNeue-ThinItalic',
'HelveticaNeue-UltraLight',
'HelveticaNeue-UltraLightItalic',
'Hiragino Mincho ProN',
'Hiragino Sans',
'HiraginoSans-W3',
'HiraginoSans-W6',
'HiraMinProN-W3',
'HiraMinProN-W6',
'Hoefler Text',
'HoeflerText-Black',
'HoeflerText-BlackItalic',
'HoeflerText-Italic',
'HoeflerText-Regular',
'Kailasa',
'Kailasa-Bold',
'Kannada Sangam MN',
'KannadaSangamMN',
'KannadaSangamMN-Bold',
'Khmer Sangam MN',
'Kohinoor Bangla',
'Kohinoor Devanagari',
'Kohinoor Telugu',
'KohinoorBangla-Light',
'KohinoorBangla-Regular',
'KohinoorBangla-Semibold',
'KohinoorDevanagari-Light',
'KohinoorDevanagari-Regular',
'KohinoorDevanagari-Semibold',
'KohinoorTelugu-Light',
'KohinoorTelugu-Medium',
'KohinoorTelugu-Regular',
'Lao Sangam MN',
'Malayalam Sangam MN',
'MalayalamSangamMN',
'MalayalamSangamMN-Bold',
'Marker Felt',
'MarkerFelt-Thin',
'MarkerFelt-Wide',
'Menlo',
'Menlo-Bold',
'Menlo-BoldItalic',
'Menlo-Italic',
'Menlo-Regular',
'Mishafi',
'Noteworthy',
'Noteworthy-Bold',
'Noteworthy-Light',
'Optima',
'Optima-Bold',
'Optima-BoldItalic',
'Optima-ExtraBlack',
'Optima-Italic',
'Optima-Regular',
'Oriya Sangam MN',
'OriyaSangamMN',
'OriyaSangamMN-Bold',
'Palatino',
'Palatino-Bold',
'Palatino-BoldItalic',
'Palatino-Italic',
'Palatino-Roman',
'Papyrus',
'Papyrus-Condensed',
'Party LET',
'PartyLetPlain',
'PingFang HK',
'PingFang SC',
'PingFang TC',
'PingFangHK-Light',
'PingFangHK-Medium',
'PingFangHK-Regular',
'PingFangHK-Semibold',
'PingFangHK-Thin',
'PingFangHK-Ultralight',
'PingFangSC-Light',
'PingFangSC-Medium',
'PingFangSC-Regular',
'PingFangSC-Semibold',
'PingFangSC-Thin',
'PingFangSC-Ultralight',
'PingFangTC-Light',
'PingFangTC-Medium',
'PingFangTC-Regular',
'PingFangTC-Semibold',
'PingFangTC-Thin',
'PingFangTC-Ultralight',
'Savoye LET',
'SavoyeLetPlain',
'Sinhala Sangam MN',
'SinhalaSangamMN',
'SinhalaSangamMN-Bold',
'Snell Roundhand',
'SnellRoundhand-Black',
'SnellRoundhand-Bold',
'Symbol',
'Tamil Sangam MN',
'TamilSangamMN-Bold',
'Telugu Sangam MN',
'Thonburi',
'Thonburi-Bold',
'Thonburi-Light',
'Times New Roman',
'TimesNewRomanPS-BoldItalicMT',
'TimesNewRomanPS-BoldMT',
'TimesNewRomanPS-ItalicMT',
'TimesNewRomanPSMT',
'Trebuchet MS',
'Trebuchet-BoldItalic',
'TrebuchetMS-Bold',
'TrebuchetMS-Italic',
'Verdana',
'Verdana-Bold',
'Verdana-BoldItalic',
'Verdana-Italic',
'Zapf Dingbats',
'ZapfDingbatsITC',
'Zapfino',
];
const android_fonts = [
'normal',
'notoserif',
'sans-serif',
'sans-serif-light',
'sans-serif-thin',
'sans-serif-condensed',
'sans-serif-medium',
'serif',
'Roboto',
'monospace',
];
class Fonts extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: null,
isLoading: true
};
}
getNavigationParams() {
return this.props.navigation.state.params || {}
}
componentDidMount(){
return fetch('http://www.koolbusiness.com/newvi/4580715507220480.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render() {
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
const { navigation } = this.props;
return (
<ScrollView style={styles.container}>
<Image
style={{width: 150, height: 150}}
source={{uri: this.state.dataSource.img}}
/>
<Text style={styles.listValue} >{this.state.dataSource.text}</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
textStyle: {
fontSize: 18,
textAlign: 'center',
padding: 10,
},
});
export default Fonts;
答案 0 :(得分：1)
onPress＆gt;上没有<Text元件。它应该在<TouchableWithoutFeedback onPress={ ()=> this.props.navigation.navigate('FontsTab', { id: item.id }) } style={styles.listHeader} >