首页 文章

使用无状态组件中的Flatlist反应本机导航

提问于
浏览 次
1

我正在尝试创建无状态组件来显示Flatlist，我正在努力进行导航 .

这是我的“主要”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>
        )
    }
}

这是组件：

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;

列表显示但当然，当我触摸一个项目时，我得到'undefined不是一个对象（评估'_this.props.navigation'）'错误 .

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

它必须是非常简单的东西，如使用导航（'Details'）并将const = this.props.navigation;某处 . 但是哪里？

javascript react-native react-native-flatlist

2 回答

  • 0

    而不是来自 Strip 组件的 navigate ，为 Strip 提供 onPress 处理程序并从那里导航 . 如果 FetchData 是 StackNavigator 的一部分，那么您可以轻松地从此组件中获取 navigate .

    考虑以下示例

    ...
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>
  );
 }
}

    在 Strip 组件中，您可以绑定 onPress 处理程序

    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>
     )
  });
})
}

    希望这会有所帮助！

    回复于
  • 1

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

    例如：

    亲

    parentNavigate(destination){
 this.props.navigation.navigate(destination);
}

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

    儿童

    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>
            )
        });
    })
}
    回复于

相关问题