Question

我正在尝试创建无状态组件以显示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，但我只是不明白如何通过无状态组件中的平面列表传递导航道具。

它必须非常简单，例如使用导航（'详细信息'）并在某处放置 const {navigate} = this.props.navigation; 。但在哪里？

Answer 1

而不是navigate组件中的Strip，向onPress提供Strip处理程序并从那里导航。如果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>
     )
  });
})
}

希望这会有所帮助！

Answer 2

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

例如：

家长

keycol1 = ['col1', 'col2']
keycol2 = ['col3', 'col4']

join = ' and '.join(['table1.{0} = table2.{1}'.format(c1, c2) \
                     for c1, c2 in zip(keycol1, keycol2)])

qry = "select * from table1 join table2 on " + join 

# 'select * from table1 join table2 on table1.col1 = table2.col3 and table1.col2 = table2.col4'

子

str.format

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

2 个答案: