当我点击平面列表中的一个项目时,我正试图导航到另一个屏幕。我是新蜜蜂。我尝试使用堆栈导航器,但无法做到这一点。它被困3天了。我正在使用自定义FlatList。平面列表工作正常,我可以点击平面列表的项目,并获得相应的项目数据。现在我想将该数据发送到另一个屏幕以在详细视图中显示该数据。我尝试了不同的方法,但我无法访问我使用onClick的道具
OrdersScreen.js
export default class OrdersScreen extends Component {
static navigationOptions = {
drawerIcon: ({tintColor}) => (
<Icon name="home" style={{fontSize: 24, color:tintColor}}/>
)
};
constructor(props) {
super(props);
this.state = {
load : false,
}
}
componentWillMount() {
setTimeout(() => {
this.setState({
load : true,
});
}, 3000);
}
getData() {
return [
{
key: 1, title: 'Albert Einstein',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
},
{
key: 2,
title: 'Isaac newton',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
},
{
key: 3, title: 'Albert Einstein',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
},
{
key: 4,
title: 'Isaac newton',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
},
{
key: 5, title: 'Albert Einstein',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
},
{
key: 6,
title: 'Isaac newton',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
},
{
key: 7, title: 'Albert Einstein',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
},
{
key: 8,
title: 'Isaac newton',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
},
{
key: 9, title: 'Albert Einstein',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
},
{
key: 10,
title: 'Isaac newton',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
},
]
}
render() {
if(this.state.load){
return (
<View style={styles.container}>
<Header style={{backgroundColor: 'white'}}>
<Left style={{position: 'absolute', flexDirection: 'row', left: 0, marginLeft: 20}}>
<Icon name="menu" style={{marginTop:20}} onPress={()=>this.props.navigation.openDrawer()}/>
<Text style={styles.titleText}> Orders!</Text>
</Left>
</Header>
<View style={styles.contain}>
<CustomListview
itemList={this.getData()}
/>
</View>
</View>
);
}else{
return (
<View style={styles.container}>
<Header style={{backgroundColor: 'white'}}>
<Left style={{position: 'absolute', flexDirection: 'row', left: 0, marginLeft: 20}}>
<Icon name="menu" style={{marginTop:20}} onPress={()=>this.props.navigation.openDrawer()}/>
<Text style={styles.titleText}> Orders!</Text>
</Left>
</Header>
<View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#ffffff'}}>
<ActivityIndicator color={'grey'}/>
</View>
</View>
);
}
}
}
自定义Listview.js
const CustomListview = ({ itemList }) => (
<View style={styles.container}>
<FlatList
data={itemList}
renderItem={({ item }) => <CustomRow
title={item.title}
description={item.description}
image_url={item.image_url}
id={item.key}
/>}
/>
</View>);export default CustomListview;
CustomRow.js
const CustomRow = ({ id, title, description, image_url }) => (
<TouchableHighlight onPress={()=> {
Toast.show(id + " Pressed", Toast.LONG);
}}>
<View style={styles.container}>
<Image source={{ uri: image_url }} style={styles.photo} />
<View style={styles.container_text}>
<Text style={styles.title}>
{title}
</Text>
<Text style={styles.description}>
{description}
</Text>
</View>
</View>
</TouchableHighlight>);export default CustomRow;
将其添加到FlatList:
onPress={() => {this.props.navigation.navigate('destinationScreen', {data: item.YourData}); }}
然后在destinationScreen中接收数据:
<Text>{this.props.navigation.state.params.data}</Text>
别忘了在app.js的导航器中包含destinationScreen:
const AppNavigator = createStackNavigator(
{
Home: HomeScreen,
Details: Screen1,
destinationScreen: Screen2
},
{
initialRouteName: "Home"
}
);
您只需要在从一个屏幕导航到另一个屏幕时传递该值,如下所示。
let data = {} // You can add your data into it
this.props.navigation.navigate('SCREENNAME', {data})
你可以把上面的代码放到oncharess of TouchableHighlight上。并将数据发送到您的下一个屏幕。
进入下一个屏幕,您可以访问以下数据:
let data = this.props.navigation.state.params.data