Question

我的项目结构如下：

app.js（加载数据和抽屉式导航器）
主屏幕（在预览模式下，使用之前获取的数据加载卡，当您单击时，您有一个NewsComponent可以获取该记录的完整数据）
NewsScreen（使用之前获取的数据加载完整文章）

在我的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>
    );
  }

但是我需要在Main组件内插入一个堆栈导航器以显示记录（NewsScreen），因为如果不这样，当我返回列表（Main）并再次转到其他记录时，内容将不会更新，并且显示第一条记录。

我尝试了几次，但遇到各种错误。现在我的MainScreen像这样：

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

但是正在使用抽屉导航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 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>
    );
  }
}

错误是“为屏幕Main获取了无效的'component'属性，它必须是有效的react组件。

Main之前的有趣事情像灵符...：/

EDIT2：

尝试并查看正式文档后。

这是问题所在

它不能是一个const，它必须是一个函数...所以我将函数添加到抽屉式导航器中，它的工作就像一个魅力。

代码如下：

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

Answer 1

在抽屉导航器中，我们有抽屉屏幕

  <Drawer.Navigator initialRouteName="Main">
     <Drawer.Screen name="Main" options={{ headerShown: false}}>
     ......
     //you can add a Stack Navigator as a screen here

  </Drawer.Navigator>

因此，您可以像上面这样定义一个Stack导航器：

  const MyStack = <Stack.Navigator>
                  //your stack screens     
                  ......
                 </Stack.Navigator>

然后，将其用作抽屉屏幕：

<Drawer.Screen name="main" component={MyStack} />

如何使用导航v5 +将Stack Navigator嵌套在Drawer Navigator中

1 个答案: