Reactjs 无法从平面列表中导航到新屏幕

我的

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

我的

”./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>            
            )
    }
}

import React，{Component}来自'React'；
导入{样式表，文本，视图，文本输入，滚动视图，警报，
平面列表、ActivityIndicator、图像、TouchableOpacity}来自“react native”；
从“本机基”导入{Container}；
从“./AppHeader”导入AppHeader；
从“/AppBody”导入AppBody；
从“./AppFooter”导入AppFooter；
导出默认类MyApp2扩展组件{
render（）{
返回(
)
}
}

---

我在

AppBody

中还有一些选项卡，其中包括

Page1

。我该怎么做呢？

看起来你并没有在任何地方导入

Page1

，奇怪的是，你导入了

MyApp2

，然后为

StackNavigator

定义了一个

const

，也被称为

MyApp2

。我无法对此进行测试，因为还有其他文件正在导入，但我相信您只需要：

• 修复您的导入
• 修复命名冲突
• 向StackNavigator注册所有屏幕，以便它们都可以访问

  导航

  道具
• 并为您的

  AppRegistry

  注册

  StackNavigator

试试这个：

保持/src/components/MyApp2的原样。然后进行这些编辑（我将假设

MyApp2

、

Page1

和

MoreInfo

都位于

/src/components/

：

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

---

在您的index.android.js文件中，您正在使用

StackNavigator

，但尚未导入它

使用：

---

从react navigation导入{StackNavigator}

你是如何注册你的应用程序的？因为你导出的是

Page1

，而不是

app

，我的直觉是你正在注册

Page1

，在这种情况下，应用程序没有导航的概念。我为

const Page1=StackNavigator>做了
Page1
（

part和get

重复声明“第1页”

错误。我正在另一个视图中导入此页面，以便导出

Page1

。应用程序的实际名称是

MyApp2

。我也尝试过，但得到了与以前相同的错误。不，你是误解了。你当前的

StackNavigator

代码很好。你可能需要导出它并在你的应用程序中注册。

react-导航

应该是应用程序整个结构的根。将部分代码与其他导航器一起发布，并将部分代码与

AppRegistry.registerComponent

一起发布。好的。理解。我更新了我的问题并添加了我的应用程序的结构。我有一种嵌套的设置，除了导航之外，运行良好。请帮助。谢谢你的时间大师。我应该在哪里调用导航？我尝试了多次尝试，但都失败了。仍然失败，出现了相同的错误。“未定义不是对象”。@Somename完全忘记了YaSh Chaudhary所说的

StackNavigator

导入。请使用该修复程序进行尝试。@Somename我以后将不得不查看它n我不忙。我用来回答问题的沙盒项目实际上有一个屏幕，用同样的

renderItem

以同样的方式使用

navigate

呈现一个

FlatList

，效果很好。我可能遗漏了一些东西。从头开始创建了一个新项目，并且成功了。我必须定义所有l打开主索引页上的导航并导入所有路线。感谢您的帮助。

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

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

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