Fatal编程技术网
  • javascript/
  • Javascript 如何使用导航v5+在抽屉导航器中嵌套堆栈导航器；

Javascript 如何使用导航v5+在抽屉导航器中嵌套堆栈导航器；

javascript react-native

Javascript 如何使用导航v5+在抽屉导航器中嵌套堆栈导航器；,javascript,react-native,react-navigation,Javascript,React Native,React Navigation,我的项目结构类似于： app.js（加载数据和抽屉导航器） 主屏幕（在预览模式下使用之前获取的数据加载卡，当您单击时，您有一个获取该记录完整数据的NewsComponent） 新闻屏幕（使用之前获取的数据加载完整文章） 在我的App.js中，我使用的抽屉导航器如下： return ( <NavigationContainer> <Drawer.Navigator initialRouteName="Main">

我的项目结构类似于：

  • app.js（加载数据和抽屉导航器）

  • 主屏幕（在预览模式下使用之前获取的数据加载卡，当您单击时，您有一个获取该记录完整数据的NewsComponent）

  • 新闻屏幕（使用之前获取的数据加载完整文章）

在我的App.js中，我使用的抽屉导航器如下：

return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Main">
          <Drawer.Screen name="Main" options={{ headerShown: false}}>
            {props => <MainScreen {...props} extraData={App.news} />}
          </Drawer.Screen>
          <Drawer.Screen name="Court Reservation" component={CourtReservation}></Drawer.Screen>
          <Drawer.Screen name="News" component={NewsScreen}></Drawer.Screen>
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }

返回(
{props=>}
);
}
但是我需要在主组件中插入一个堆栈导航器，以便显示记录（新闻屏幕），因为如果不是这样，当我返回到列表（主）并再次返回到另一个记录时，内容不会更新，并且会显示第一条记录

我试了好几次，但都出错了。现在我的主屏幕是这样的：

render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button onPress={() => this.props.navigation.openDrawer()} transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <FlatList
          data={this.state.news}
          onEndReached={this.fetchMoreNews}
          onEndReachedThreshold={0.5}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({item}) => (
            <Content>
          <CardNewsComponent data={item} nav={this.props.navigation}/>
          </Content>
          )}/>
        </Container>
    );
  }

render（）{
返回(
this.props.navigation.openDrawer（）}透明>
标题
index.toString（）}
renderItem={（{item}）=>(
)}/>
);
}
但是正在使用抽屉导航ir命令“导航”到组件

如何集成堆栈导航器来实现这一点

编辑：

之后，我的app.js如下所示：

    import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import MainScreen from './screens/MainScreen';
import NewsScreen from './screens/NewsScreen';
import CourtReservation from './screens/CourtReservation';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import axios from 'axios';


const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

const myStack = (<Stack.Navigator initialRouteName="Main">
              <Stack.Screen name="Main" options={{ headerShown: false}}>
                {props => <MainScreen {...props} extraData={App.news} />}
              </Stack.Screen>
              <Stack.Screen name="News" component={NewsScreen}></Stack.Screen>
            </Stack.Navigator>)
       

export default class App extends React.Component {
  state = {
    appIsReady: false,
  };

  news = {};

  async componentDidMount() {
    // Prevent native splash screen from autohiding
    try {
      await SplashScreen.preventAutoHideAsync();
    } catch (e) {
      console.warn(e);
    }
    this.prepareResources();
  }

  /**
   * Method that serves to load resources and make API calls
   */
  prepareResources = async () => {
    await performAPICalls();
    await downloadAssets();

    this.setState({ appIsReady: true }, async () => {
      await SplashScreen.hideAsync();
    });
  };

  render() {
    if (!this.state.appIsReady) {
      return null;
    }

    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Main">
          <Drawer.Screen name="Main" component={myStack}></Drawer.Screen>
          <Drawer.Screen name="Court Reservation" component={CourtReservation}></Drawer.Screen>
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
}

// Put any code you need to prepare your app in these functions
async function performAPICalls() {
  await axios.get('https://alqueriadelbasket.com/?r=noticias/FetchNoticiasJson&boundBot=0&boundTop=5')
    .then((response) => {
      App.news = response.data;
    }).catch((error)=> {
      console.log(error);
    })
}
async function downloadAssets() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
  });
}

import*as React from'React'；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从'@react navigation/stack'导入{createStackNavigator}；
从“/screens/MainScreen”导入主屏幕；
从“./screens/newscreen”导入新闻屏幕；
从“/screens/CourtReservation”导入法庭预订；
从“世博会闪屏”导入*作为闪屏；
从“expo字体”导入*作为字体；
从“@expo/vector icons”导入{Ionicons}；
从“axios”导入axios；
const Drawer=createDrawerNavigator（）；
const Stack=createStackNavigator（）；
常量myStack=(
{props=>}
)
导出默认类App扩展React.Component{
状态={
appIsReady:false，
};
新闻={}；
异步组件didmount（）{
//防止本机启动屏幕自动隐藏
试一试{
等待SplashScreen.preventAutoHideAsync（）；
}捕获（e）{
控制台。警告（e）；
}
这是prepareResources（）；
}
/**
*方法，该方法用于加载资源和进行API调用
*/
prepareResources=async（）=>{
等待调用（）；
等待下载资产（）；
this.setState（{appIsReady:true}，async（）=>{
等待SplashScreen.hideAsync（）；
});
};
render（）{
如果（！this.state.appIsReady）{
返回null；
}
返回(
);
}
}
//在这些函数中输入准备应用程序所需的任何代码
异步函数调用（）{
等待axios。获取更多信息https://alqueriadelbasket.com/?r=noticias/FetchNoticiasJson&boundBot=0&boundTop=5')
。然后（（响应）=>{
App.news=response.data；
}).catch（（错误）=>{
console.log（错误）；
})
}
异步函数下载资产（）{
等待Font.loadAsync({
Roboto:require（'native-base/font/Roboto.ttf'），
Roboto_medium:require（'native-base/font/Roboto_medium.ttf'），
…Ionicons.font，
});
}
还有我的主屏幕

import React, { Component } from 'react';
import { Container, Content, Header, Left, Button, Icon, Right, Body, Title} from 'native-base';
import {FlatList} from 'react-native';
import CardNewsComponent from './components/CardNewsComponent';
import axios from 'axios';

export default class MainScreen extends Component {
  constructor(props){
    super(props);
    this.state = {
      news: this.props.extraData,
      boundBot: 6,
      bountTop: 11,
      error: null,
    };
  }

  fetchMoreNews = () => {
    axios.get(`https://alqueriadelbasket.com/?r=noticias/FetchNoticiasJson&boundBot=${this.state.boundBot}&boundTop=${this.state.bountTop}`)
    .then((response) => {
      this.setState({
        boundBot: this.state.boundBot+5,
        boundTop: this.state.boundTop+5,
        news: this.state.news.concat(response.data)
      })
    }).catch((error)=> {
      console.log(error);
    })
  }

  newsData = this.props.extraData;
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button onPress={() => this.props.navigation.openDrawer()} transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <FlatList
          data={this.state.news}
          onEndReached={this.fetchMoreNews}
          onEndReachedThreshold={0.5}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({item}) => (
            <Content>
          <CardNewsComponent data={item} nav={this.props.navigation}/>
          </Content>
          )}/>
        </Container>
    );
  }
}

import React，{Component}来自'React'；
从“本机基础”导入{容器、内容、标题、左侧、按钮、图标、右侧、正文、标题}；
从“react native”导入{FlatList}；
从“./components/CardNewsComponent”导入CardNewsComponent；
从“axios”导入axios；
导出默认类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新闻：this.props.extraData，
六,，
汤顶:11,，
错误：null，
};
}
fetchMoreNews=（）=>{
axios.get(`https://alqueriadelbasket.com/?r=noticias/FetchNoticiasJson&boundBot=${this.state.boundBot}&boundTop=${this.state.boundTop}`）
。然后（（响应）=>{
这是我的国家({
boundBot:this.state.boundBot+5，
boundTop:this.state.boundTop+5，
新闻：this.state.news.concat（response.data）
})
}).catch（（错误）=>{
console.log（错误）；
})
}
newsData=this.props.extraData；
render（）{
返回(
this.props.navigation.openDrawer（）}透明>
标题
index.toString（）}
renderItem={（{item}）=>(
)}/>
);
}
}
错误是“为屏幕主屏幕的'component'属性获取了无效值，它必须是有效的react组件。”

有趣的是，梅因以前工作得很有魅力…：/

编辑2：

试着看一下官方文件的内部

这就是问题所在：

它不可能是常量，它必须是一个函数…所以我将把这个函数添加到抽屉导航中，它就像一个符咒一样工作

代码如下：

function MyStack() {
  return (
    <Stack.Navigator initialRouteName="Main">
              <Stack.Screen name="Main" options={{ headerShown: false}}>
                {props => <MainScreen {...props} extraData={App.news} />}
              </Stack.Screen>
              <Stack.Screen name="News" component={NewsScreen}></Stack.Screen>
            </Stack.Navigator>
  );
}

函数MyStack（）{
返回(
{props=>}
);
}
在抽屉导航器中，我们有抽屉屏幕


......
//您可以在此处添加堆栈导航器作为屏幕
因此，您可以在上面定义堆栈导航器，如下所示：

const MyStack=
//您的堆栈屏幕
......
然后，将其用作抽屉屏幕：
使用我正在进行的编辑“Undefined”不是一个对象（评估“Stack.Navigator”任何g