Edw*_*4rd 1 javascript react-native react-navigation
我的项目结构是这样的：
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>
);
}
但我需要在主组件内插入一个堆栈导航器，以便显示记录（NewsScreen），因为如果没有，当我返回到列表（主）并再次到不同的记录时，内容不会更新，并且第一条记录是正在显示。
我尝试了几次，但遇到了各种各样的错误。现在我的主屏幕是这样的：
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 命令“导航”到组件。
如何集成堆栈导航器来执行此操作？
编辑：
在那种 awnser 之后，我的 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 以前工作得很有魅力......：/
编辑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>
);
}
在抽屉导航器内，我们有抽屉屏幕
<Drawer.Navigator initialRouteName="Main">
<Drawer.Screen name="Main" options={{ headerShown: false}}>
......
//you can add a Stack Navigator as a screen here
</Drawer.Navigator>
因此，您可以在上面定义一个堆栈导航器，如下所示：
const MyStack = <Stack.Navigator>
//your stack screens
......
</Stack.Navigator>
然后，将其用作抽屉屏幕：
<Drawer.Screen name="main" component={MyStack} />
| 归档时间： |
|
| 查看次数： |
4088 次 |
| 最近记录： |