将数据传递给路由导航 React Native

艾门 艾门

我制作了一个平面列表的屏幕,显示一堆医生信息(姓名,位置,图片),当我点击医生视图时,它会导航到他的个人资料。目前,配置文件屏幕只是空白,但我想传递参数,这样我就可以在不重新调用 api 的情况下显示它们。这是平面列表所在的研究屏幕的代码:

 render(){
      return (
        <View style={styles.main_container}>

            <FlatList 
                data={this.state.dataSource}
                keyExtractor={item=> item.id.toString()}
                renderItem= {({item})=> <MedItem Med={item}  />} />
        </View>
      );
    }

我创建了一个组件自定义 med 项目来设计我的平面列表://Meditem.js

class MedItem extends React.Component {
    render(){
        const Med = this.props.Med
      return (
        <View style={styles.main_container}  >

            <View style={styles.ctr1}>
                <TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil')}>
                    <Image style={styles.img} source={require('../assets/Title.jpg')} />
                </TouchableOpacity>    
                <TouchableOpacity onPress={()=>NavigationService.navigate('MedProfil')}>
                    <Text style={styles.txt}> {Med.name} </Text>
                    <Text style={{flexWrap:'wrap'}} > {Med.specialite} </Text>
                    <Text> {Med.work} </Text>
                </TouchableOpacity>
            </View>
            <View style={styles.ctr2}>
                    <Text style={{textAlign:'center',marginBottom:5}}>Disponibilité</Text>

                    <Calendar/> 


            </View>
        </View>
      );
    }
} 

最后这是我的医生简介屏幕:

export default class MedProfilScreen extends React.Component {
  render(){
    return(
      <View>
        <Text>{Med.name}</Text>
        <Button title='Prendre rendez-vous' onPress={()=>{}} />
      </View>
    );
  }
}

有人可以帮我做这个。谢谢

卡马尔维尔马

通过这样的导航发送数据

this.props.navigation.navigate("MedProfil",
      {
       name:Med.name
      })

在 MedProfil Screen 中获取数据

const name=this.props.navigation.getParam("name")

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将额外的道具数据传递给react-native-draggable-flatlist中的renderItem

如何将JSON数据传递给react-native-maps-super-cluster

React Native - 如何将数据传递给作为另一个组件内部属性的组件

React 路由器 - 将 api 数据传递给链接的组件以打开新页面

Redux React Native - 动作不将数据传递给减速器

我可以在 react-native 中将两个数据传递给 FlatList 吗?

如何将数据从类传递给React Native数组,firebase,堆栈导航器v5中的函数

使用React-Native导航传递数据

将 swift 块传递给 React Native

React Native:将useState()数据传递到不相关的屏幕

将JSON数据传递到React Native中的下一页

将JSON数据传递到react native(hook)中的下一页

react native:如何将动作传递给屏幕反应导航,(没有 Redux)?

如何将道具传递给导航屏幕组件-React Native

React 将 API 数据传递给图表

将数据传递给 react js 中的组件 onClick

将数据传递给独立组件React

使用React导航的条件路由(React Native)

我有一个项目列表,我想使用react native导航将导航传递给它

使用Wix React Native Navigation(RNN)时将属性从native传递给React Native

React导航与React Native导航

在屏幕、route.params、React Native 导航之间传递数据

将标题从React Native导航传递到Header Component

数据不传递给调用函数 React-Native

React Native,将两个值传递给导航中的下一个屏幕

React Native:将参数传递给 Drawer.Navigator

将组件标签作为props传递给react native

将原始值传递给React Native中的onChangeText

将道具传递给子组件-React Native