I am very newly in react native app developement. I have problem is am try to navigate to first screen to second screen with data(String and image) also. but will try to navigate error. The error was navigate is not defined. Please solve my issues and edit my code. I have attached my code for your reference.
import React from 'react';
import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity } from 'react-native';
function Item({ item }) {
return (
<View style={styles.listItem}>
<Image source={{uri:item.photo}} style={{width:60, height:60,borderRadius:30}} />
<View style={{alignItems:"center",flex:1}}>
<Text style={{fontWeight:"bold"}}>{item.name}</Text>
<Text>{item.position}</Text>
</View>
<TouchableOpacity
onPress={() => getItem(item)}
style={{height:50,width:50, justifyContent:"center",alignItems:"center"}}>
<Text style={{color:"green"}}>Call</Text>
</TouchableOpacity>
</View>
);
}
const getItem = (item) => {
// Function for click on an item
alert('Id : ' + item.id + ' Title : ' + item.position);
};
const getpress=(item)=> {
this.props.navigation.navigate('SecondPage', {
itemId: item.name,
title: item.position.rendered,
});
}
export default class FirstPage extends React.Component {
state = {
data:[
{
"name": "Miyah Myles",
"email": "miyah.myles@gmail.com",
"position": "Data Entry Clerk",
"photo": "https:\/\/images.unsplash.com\/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
},
{
"name": "June Cha",
"email": "june.cha@gmail.com",
"position": "Sales Manager",
"photo": "https:\/\/randomuser.me\/api\/portraits\/women\/44.jpg"
}
]
}
render(){
//const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<TouchableOpacity onPress={()=>navigate('SecondPage')}>
<FlatList
style={{flex:1}}
data={this.state.data}
renderItem={({ item }) => <Item item={item}/>}
keyExtractor={item => item.email}
/>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F7F7F7',
marginTop:60
},
listItem:{
margin:10,
padding:10,
backgroundColor:"#FFF",
width:"80%",
flex:1,
alignSelf:"center",
flexDirection:"row",
borderRadius:5
}
});
I assume that you want to navigate to the Second page when your Flatlist item press with the params. So don't put complete flatlist in a Touchable despite only wrap the Item with Touchable and pass the onPress as props to the Item From the Parent.
Here is the code:
import React from 'react';
import {
StyleSheet,
Text,
View,
FlatList,
Image,
TouchableOpacity,
} from 'react-native';
function Item({item, onPress}) {
return (
<View style={styles.listItem}>
<Image
source={{uri: item.photo}}
style={{width: 60, height: 60, borderRadius: 30}}
/>
<View style={{alignItems: 'center', flex: 1}}>
<Text style={{fontWeight: 'bold'}}>{item.name}</Text>
<Text>{item.position}</Text>
</View>
<TouchableOpacity
onPress={() => onPress(item)}
style={{
height: 50,
width: 50,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{color: 'green'}}>Call</Text>
</TouchableOpacity>
</View>
);
}
const getItem = item => {
// Function for click on an item
alert('Id : ' + item.id + ' Title : ' + item.position);
};
export default class FirstPage extends React.Component {
state = {
data: [
{
name: 'Miyah Myles',
email: 'miyah.myles@gmail.com',
position: 'Data Entry Clerk',
photo:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6',
},
{
name: 'June Cha',
email: 'june.cha@gmail.com',
position: 'Sales Manager',
photo: 'https://randomuser.me/api/portraits/women/44.jpg',
},
],
};
getpress = item => {
this.props.navigation.navigate('SecondPage', {
itemId: item.name,
title: item.position.rendered,
});
};
render() {
//const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<FlatList
style={{flex: 1}}
data={this.state.data}
renderItem={({item}) => <Item item={item} onPress={this.getpress} />}
keyExtractor={item => item.email}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F7F7F7',
marginTop: 60,
},
listItem: {
margin: 10,
padding: 10,
backgroundColor: '#FFF',
width: '80%',
flex: 1,
alignSelf: 'center',
flexDirection: 'row',
borderRadius: 5,
},
});
In your first page:
const getpress = (item) => {
this.props.navigation.navigate('SecondPage', {
itemId: item.name,
title: item.position.rendered
});
}
In your second page:
function SecondPage({ route, navigation }) {
const { itemId, title } = route.params;
return (
//...
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.