Javascript 使用无状态组件中的平面列表响应本机导航

我试图创建无状态组件来显示一个平面列表，我正在努力进行导航

这是我的'main'app.js，精简版：

import React from 'react';
import { AppRegistry, FlatList, ActivityIndicator, Text, View, Image, StyleSheet } from 'react-native';
import { StackNavigator } from 'react-navigation'
import Strip from '../components/Strip'

export default class FetchData extends React.Component {

    constructor(props){
        super(props);
        this.state ={ isLoading: true}
    }

    componentDidMount(){
        ...
    }


    render(){
        if(this.state.isLoading){
            ...
        }
        return (
            <View>
                <Strip props={this.state.dataSource.strips} />
            </View>
        )
    }
}

从“React”导入React；
从“react native”导入{AppRegistry、FlatList、ActivityIndicator、文本、视图、图像、样式表}；
从“反应导航”导入{StackNavigator}
从“../components/Strip”导入条带
导出默认类FetchData扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isLoading:true}
}
componentDidMount（）{
...
}
render（）{
if（此.state.isLoading）{
...
}
返回(
)
}
}

这是组件：

import React from 'react';
import { FlatList, Text, View, Image, StyleSheet, TouchableOpacity } from 'react-native';

renderItem = ({item}) => (
    <TouchableOpacity onPress={() => this.props.navigation.navigate('Details')} >
        <View style={{width: 136}}>
            ...
            <Text>some text</Text>
        </View>
    </TouchableOpacity>
);

const Strip = (props) => {
    return Object.keys(props).map(function(key, i) {
        return Object.keys(props[key]).map((strips, i) => {
            var strip = props[key][strips];
            return(
                <View>
                    <Text>{strip.title}</Text>
                    <FlatList horizontal
                        data={strip.someobjects}
                        renderItem={({item}) => this.renderItem(item)}
                    />     
                </View>
            )
        });
    })
}

export default Strip;

从“React”导入React；
从“react native”导入{FlatList、文本、视图、图像、样式表、TouchableOpacity}；
renderItem=（{item}）=>(
this.props.navigation.navigate（'Details'）}>
...
一些文本
);
常量条=（道具）=>{
返回对象。键（道具）。映射（函数（键，i）{
返回Object.key（props[key]）.map（（strips，i）=>{
var strip=道具[关键点][条带]；
返回(
{strip.title}
this.renderItem（项目）}
/>     
)
});
})
}
导出默认条带；

列表会显示出来，但是，当我触摸一个项目时，当然会出现“undefined is not a object（计算“_this.props.navigation”）”错误

我知道我不能在无状态组件上使用this.props.navigation.navigation，但我不明白如何通过无状态组件中的平面列表传递导航道具

---

它必须非常简单，比如使用navigate（'Details'）和put const{navigate}=this.props.navigation；某处。但在哪里？

在父级中定义导航功能，并通过道具将其传递给子级

例如：

母公司

---

parentNavigate（目的地）{
this.props.navigation.navigate（目的地）；
}
render（）{
if（此.state.isLoading）{
...
}
返回(
this.parentNavigate（destination）}/>
)
}

孩子

---

renderItem=（项，父项导航）=>(
...
一些文本
);
常量条=（道具，父导航）=>{
返回对象。键（道具）。映射（函数（键，i）{
返回Object.key（props[key]）.map（（strips，i）=>{
var strip=道具[关键点][条带]；
返回(
{strip.title}
this.renderItem（项，parentNavigate）}
/>     
)
});
})
}

提供一个

onPress

处理程序到

条带

并从那里导航，而不是从

条带

组件导航。如果

FetchData

是

StackNavigator

的一部分，那么您可以从该组件轻松地进行

导航

考虑下面的例子

...
export default class FetchData extends React.Component {
 ...
 handleOnPress = () => {
  this.props.navigation.navigate('Details')
 }

 render() {
  if(this.state.isLoading){
   ...
  }
  return (
   <View>
    <Strip 
     props={this.state.dataSource.strips} 
     onPress={this.handleOnPress} 
    />
   </View>
  );
 }
}

希望这会有帮助
 谢谢哈里克里希南。我明白其中的逻辑，我可以试着解决这个问题。目前我得到的“未定义”不是一个函数（评估“parentNavigate（'Details'））。啊，我喜欢这种方法。“获取未定义”这次不是一个对象（评估“\u this.props.navigation.navigate”）。它是
FetchData
的组成部分吗
StackNavigator
？我现在意识到它不是。我将借此机会重构并将逻辑与视图分离。谢谢你，普拉森，朋友。
renderItem = (item, parentNavigate) => (
    <TouchableOpacity onPress={parentNavigate('Details')} >
        <View style={{width: 136}}>
            ...
            <Text>some text</Text>
        </View>
    </TouchableOpacity>
);

const Strip = (props, parentNavigate) => {
    return Object.keys(props).map(function(key, i) {
        return Object.keys(props[key]).map((strips, i) => {
            var strip = props[key][strips];
            return(
                <View>
                    <Text>{strip.title}</Text>
                    <FlatList horizontal
                        data={strip.someobjects}
                        renderItem={(item, parentNavigate) => this.renderItem(item, parentNavigate)}
                    />     
                </View>
            )
        });
    })
}

...
export default class FetchData extends React.Component {
 ...
 handleOnPress = () => {
  this.props.navigation.navigate('Details')
 }

 render() {
  if(this.state.isLoading){
   ...
  }
  return (
   <View>
    <Strip 
     props={this.state.dataSource.strips} 
     onPress={this.handleOnPress} 
    />
   </View>
  );
 }
}

 const Strip = (props) => {
  renderItem = ({item}) => (
   <TouchableOpacity onPress={props.onPress} >
    <View style={{width: 136}}>
     ...
    <Text>some text</Text>
   </View>
  </TouchableOpacity>
 );

 return Object.keys(props).map(function(key, i) {
  return Object.keys(props[key]).map((strips, i) => {
   var strip = props[key][strips];
    return(
     <View>
      <Text>{strip.title}</Text>
       <FlatList horizontal
         data={strip.someobjects}
         renderItem={({item}) => renderItem(item)}
       />     
      </View>
     )
  });
})
}