Question

*大家好我是React本机编程和Java脚本的新手，我想构建一个列表项，当我按一个项目时，我应该转到另一个屏幕，我使用了onPress方法* *但是它不起作用，我希望我能尽快在这里找到答案：*

import React, { Component } from 'react';
import { AppRegistry, Image , StyleSheet, Text, View } from 'react-native';
import { ListItem } from 'react-native-elements';
import { Icon,navigationOptions } from 'react-native-elements';


export default class HomeScreen extends Component {


goToOtherScreen(ScreenName) {
    this.props.navigation.navigate('Item');
 }

 render() {
let pic = {
  uri: 'https://www.lscoiffure.fr/images/assistance.jpg'
};
return (

  <View style={styles.container}>
    //Image "jai utilisé juste une autre photo pour essayer"
  <View>
    <Image source={pic} style={{width: 350, height: 200}}
    />
    //Text(title)
    <View style={{position: 'absolute', left: 0, right: 0, bottom: 0, justifyContent: 'center',marginBottom:20, alignItems: 'center'}}>
 <Text style={{color :'#ffffff',fontSize:24}}>Assistance</Text>
</View>
   </View>

    {

  list.map((item, i) => (
    <ListItem

      key={i}
      title={item.title}
      leftIcon={{ name: item.icon ,color:'black'}}
      onPress={() => this.goToOtherScreen(item.ScreenName)}
    />
  ))
}
  </View>
);
 }
}

const list = [
{
title: 'Appeler le service clientèle',
icon: 'perm-phone-msg',
ScreenName : 'SecondScreen',
},
 {
title: 'FAQ',
icon: 'help'
  },
 {
title: 'Conditions et mentions légal',
icon :'error'
  },

 ]


   const styles = StyleSheet.create({
   container: {
 flex: 1,
  backgroundColor:'#ffffff'

 },
 item: {
padding: 50,
fontSize: 18,
height: 44,
 },

 })

请帮助我知道我的错误在哪里

Answer 1

在您的代码中更改

goToOtherScreen(ScreenName) {
        this.props.navigation.navigate(ScreenName);
     }

使用React Native的列表项中的Onpress方法

1 个答案: