如何将导航道具传递给演示组件

2024-05-03 • 问答

对于flatlist，我创建了一个演示组件并将项目作为道具传递给子组件，这很好用。现在，我在演示组件中使用TouchableOpacity，并在其他组件中使用navigate。我该如何实现？？

MyflastList：

_renderItem({item,index}) {
        return(
            <View>
              {index == 0 && <MachineInformationCard {...item}/>}
              {index > 0 && <MachineFunctionality {...item} />}   
            </View>
        )
    }

我的Presentational层：

import React from 'react';
import {View,Text,StyleSheet,TouchableOpacity} from 'react-native';
export default MachineFunctionality = (props) => {
    let acheivedPercentage = ((props.acheived_value/props.target_value)*100);
    let acheivedPercentageValue = acheivedPercentage;
    acheivedPercentage = acheivedPercentageValue + '%';
    return(
        <TouchableOpacity style={styles.CardItem} 
        onPress={()=> this.props.navigation.navigate('MachineFunctionalityDetail')}>
            <Text style={{fontSize:18,color:'black'}}>{props.level}</Text>
            <Text style={{marginTop: 5}}>{props.taget_label}</Text>
            <View style={[styles.barContainer,{width:'100%'}]}>
                {/* <Text style={{textAlign:'center',fontSize:12,padding:2}}>100%</Text> */}
            </View>
            <Text style={{marginTop: 5}}>{props.acheived_label} ({Math.ceil(acheivedPercentageValue)}%)</Text>
            <View style={[styles.barContainer,{width: acheivedPercentage}]}>
            </View>
        </TouchableOpacity>
    )
}
const styles = StyleSheet.create({
    CardItem: {
        flex: 1,height:120,padding:8,backgroundColor:'#e7e7e7',borderRadius: 5,overflow: 'hidden',margin: 5,shadowColor: 'black',shadowOpacity: 0.8,elevation: 8
    },barText: {
        justifyContent: 'center',fontSize: 13,margin: 10,fontWeight: 'bold',},barContainer: {
        height: 10,marginTop:5,backgroundColor:'lightskyblue',borderColor: 'blue',borderWidth: 1,borderRadius: 3,shadowOpacity: 0,elevation: 2,})

MyNavigator

const MachinestackNavigator = createStackNavigator({
  MachineHome: {screen: AllMachine,navigationOptions:{header: null}},MachineFunctionalityDetail: {screen:MachineFunctionalityDetail,MachineProfile:{screen:MachineProfile,navigationOptions:{header: null}}
})

我创建了一个用于处理导航问题的库，并且还阻止了this.props.navigation道具的使用。

React Navigation Helpers

用法非常简单。在您的App.js或导航器上，只需设置全局级别的导航器即可。

import NavigationService from "react-navigation-helpers";


<MainNavigator
  ref={navigatorRef =>
    NavigationService.setGlobalLevelNavigator(navigatorRef)
  }
/>

然后，通过以下简单代码段在项目中使用ANYWHERE：

NavigationService.navigate("home")

当然，您仍然需要导入NavigationService：）

已更新：

如何通过此库传递道具？

用法不变。只需将您的道具作为第二个道具，与React Navigation本身一样即可。

导航

NavigationService.navigate("home",{data: myData,myId: "d1f01df1" })

推

NavigationService.push("home",myId: "d1f01df1" })

如何从导航或推送功能接收传递的道具？

const data = props.navigation.getParam("data",null) // Second one is default value
const myId = props.navigation.getParam("myId","") // Second one is default value

您可以在图书馆的自述文件中找到更详细的文档。如果您还有问题，请随时提出，我们将很乐意为您提供帮助。

新版本在这里：Release 0.1.0

首先只需使用React Navigation提供的HOC，例如注入导航道具的 withNavigation 。

只需通过演示组件中的react-navigation导入 withNavigation 。

import {withNavigation} from 'react-navigation'; // Add this line

并像这样导出您的演示组件：

export default withNavigation(MachineFunctionality);

这样，您无需更改组件中的其他任何内容。

如何将导航道具传递给演示组件

dizihenmang1 回答：如何将导航道具传递给演示组件

React Navigation Helpers

已更新：

如何通过此库传递道具？

如何从导航或推送功能接收传递的道具？

大家都在问