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

Question

对于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, navigationOptions:{header: null}},
  MachineProfile:{screen:MachineProfile, navigationOptions:{header: null}}
})

Answer 1

我创建了一个用于处理导航问题的库，并且还阻止了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", {data: myData, 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

Answer 2

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

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

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

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

export default withNavigation(MachineFunctionality);

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