Как передать навигационные реквизиты в презентационный компонент

Question

Для Flatlist я создал презентационный компонент и передаю элементы как реквизиты дочернему компоненту, который работает нормально. Теперь я использую TouchableOpacity в презентационном компоненте и navigate в другом компоненте. Как этого добиться ??

MyFlastList:

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

MyPresentational layer:

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 prop.

React Navigation Helpers

Использование очень просто. В вашем App.js или навигаторе просто установите навигатор глобального уровня.

import NavigationService from "react-navigation-helpers";


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

Затем вы используете ЛЮБОЕ в своем проекте с этим простым сегментом кода:

NavigationService.navigate("home")

Конечно, вам все еще нужно импортировать NavigationService:)

Выможно найти более подробный документ в библиотеке README. Если у вас все еще есть вопрос, не стесняйтесь спрашивать, я с радостью вам помогу.

Answer 2

Сначала просто используйте HOC, предоставляемый React Navigation, например withNavigation , который вводит реквизиты навигации.

Просто импортируйте withNavigation из реагирования-навигации в вашем презентационном компоненте.

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

и экспортируйте свой презентационный компонент следующим образом:

export default withNavigation(MachineFunctionality);

Таким образом, вам не нужно ничего менять в своем компоненте.