Question

无法从 FlatList 内导航到新屏幕

2017-08-10

1125

reactjs react-native react-navigation

我使用 FlatList 的第一个页面是：

import React, { Component } from 'react';
import { View, StyleSheet, FlatList, Text, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';

import MoreInfo from './MoreInfo';

export default class Page1 extends Component {
    constructor(props){
        super(props);       
    }


  render() {
    const { navigate } = this.props.navigation;   

    return (
        <View style={styles.container}>
            <FlatList
                data={users}
                renderItem={
                    ({item}) => 
                        <TouchableHighlight onPress={() => navigate('MoreInfo', { name: 'Jane' })}>
                            <Text style={styles.welcome}> {item.name} </Text>
                        </TouchableHighlight>
                    }
                keyExtractor={item => item.index}
                >
            </FlatList>
        </View>
    );
  }
}

const App = StackNavigator({
    Page1: {screen: Page1},
    MoreInfo: { screen: MoreInfo },
})

我能够在不使用导航的情况下获取 FlatList 中显示的数据。但是当我放置导航并单击列表中的任何项目时，我收到错误：

请帮忙。尝试了 3 天。

我的 index.android.js 是

import React, { Component } from 'react';
import { AppRegistry} from 'react-native';

import MyApp2 from './src/components/MyApp2';

const MyApp2 = StackNavigator({
    Page1: {screen: Page1},
    MoreInfo: { screen: MoreInfo },
})

AppRegistry.registerComponent('MyApp2', () => MyApp2);

而我的 './src/components/MyApp2' 是：

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, Alert,
        FlatList, ActivityIndicator, Image,TouchableOpacity } from 'react-native';

import { Container } from 'native-base';

import AppHeader from './AppHeader';
import AppBody from './AppBody';
import AppFooter from './AppFooter';


export default class MyApp2 extends Component{
    render(){
        return(
            <Container>
                <AppHeader />
                <AppBody/>
                <AppFooter />
            </Container>            
            )
    }
}

我在 AppBody 中还有一些选项卡，其中包括 Page1 。我该怎么做？

Answer 1

看起来您没有在任何地方导入 Page1 ，而且您导入 MyApp2 ，然后为 StackNavigator 定义一个 const ，该 StackNavigator 也被称为 MyApp2 ，这很奇怪。我无法测试这一点，因为还有其他文件正在导入，但我相信您只需要：

修复您的导入，
修复您的命名冲突，
使用 StackNavigator 注册您的所有屏幕，以便它们都可以访问 navigation 属性，
并为您的 AppRegistry 注册 StackNavigator 。

试试这个：

保留 ./src/components/MyApp2 原样。然后进行以下编辑（我假设 MyApp2 、 Page1 和 MoreInfo 都位于 ./src/components/ 中：

Page1 文件（无论其名称如何）：

import React, { Component } from 'react';
import { View, StyleSheet, FlatList, Text, TouchableHighlight } from 'react-native';

export default class Page1 extends Component {
    constructor(props){
        super(props);       
    }

  render() {
    const { navigate } = this.props.navigation;   

    return (
        <View style={styles.container}>
            <FlatList
                data={users}
                renderItem={
                    ({item}) => 
                        <TouchableHighlight onPress={() => navigate('MoreInfo', { name: 'Jane' })}>
                            <Text style={styles.welcome}> {item.name} </Text>
                        </TouchableHighlight>
                    }
                keyExtractor={item => item.index}
                >
            </FlatList>
        </View>
    );
  }
}

index.android.js

import React, { Component } from 'react';
import { AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation';

// Making an assumption for where these files are located
// since it's not in the original question.
import MyApp2 from './src/components/MyApp2';
import MoreInfo from './src/components/MoreInfo';
import Page1 from './src/components/Page1';

/**
 * This presumes that MyApp2 is the screen that will be loaded first.
 * I don't know how you are getting to Page1, but it will be accessible
 * if you navigate to it like so:
 *     this.props.navigation.navigate('Page1')
 * Once there, the navigate() in the FlatList of Page1 should work as written.
 */
const RootNavigator = StackNavigator({
    MyApp2: {screen: MyApp2},
    Page1: {screen: Page1},
    MoreInfo: { screen: MoreInfo },
})

AppRegistry.registerComponent('MyApp2', () => RootNavigator);

Answer 2

在您的 index.android.js 文件中，您正在使用 StackNavigator ，但您尚未导入它。

使用：

从 react-navigation 导入 { StackNavigator }