react-native - 使用 react-native-navigation 反应原生导航不起作用
问题描述
这是我无法使用的代码。
import React from 'react';
import{View,SafeAreaView,Text,Image,ScrollView} from 'react-native';
import Icons from 'react-native-vector-icons/Ionicons';
import { createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation'
import ListofHome from '../component/props/Index'
import Navbar from '../navigation/Navbar'
import Detail from './Details'
import { TouchableOpacity } from 'react-native-gesture-handler';
class Home extends React.Component{
render(){
return(
<View style={{
flex:1,
backgroundColor: '#f5fcff',
}}>
<Navbar/>
<ScrollView style={{flex:1}}>
<View style={{marginTop:3,paddingHorizontal:20,flexDirection:'row',justifyContent:'space-between'}}>
<Text style={{fontWeight:'800',color:'red'}}>
JOB POSTS
</Text>
<Text>View more..</Text>
</View>
<TouchableOpacity onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}>
<ListofHome
name="The list of master plans about me that is"/>
</TouchableOpacity>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
</ScrollView>
</View>
)
}
}
const AppNavigator = createStackNavigator(
{
First:{
screen:Detail,
}
}
);
export default (Home);
我找不到错误在哪里。它不工作它也没有显示错误但不工作。
解决方案
如果我猜对了您的问题,那么这里是解决方案:
import React from 'react';
import{View,SafeAreaView,Text,Image,ScrollView} from 'react-native';
import Icons from 'react-native-vector-icons/Ionicons';
import { createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation'
import ListofHome from '../component/props/Index'
import Navbar from '../navigation/Navbar'
import Detail from './Details'
import { TouchableOpacity } from 'react-native-gesture-handler';
class Home extends React.Component{
render(){
return(
<View style={{
flex:1,
backgroundColor: '#f5fcff',
}}>
<Navbar/>
<ScrollView style={{flex:1}}>
<View style={{marginTop:3,paddingHorizontal:20,flexDirection:'row',justifyContent:'space-between'}}>
<Text style={{fontWeight:'800',color:'red'}}>
JOB POSTS
</Text>
<Text>View more..</Text>
</View>
<TouchableOpacity onPress={() => {
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}>
<ListofHome
name="The list of master plans about me that is"/>
</TouchableOpacity>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
<ListofHome name="About your page that is do"/>
</ScrollView>
</View>
)
}
}
const AppNavigator = createStackNavigator(
{
Home: {
screen: Home
},
Details:{
screen:Detail,
}
},
{
initialRouteName: 'Home',
}
);
export default AppNavigator
您必须将 AppNavigator 导出为默认值并使用您为屏幕定义的相同键导航屏幕。
推荐阅读
- python - 在 Python 的循环中使用 .remove
- python - Python函数只返回第一个值而不是数据框
- spacy - 如何在 spaCy 上训练伪投影解析器?
- node.js - Firebase中重命名的图片在打开网址后不显示
- java - 如何设置预定义的 android-TV 设备解码器以通过 exoplayer 进行声音解码?
- r - eval 中的错误(predvars、data、env):找不到对象“STATE_UT”
- express - 使用 ExpressJs 的 AppInsights 自动收集
- kubernetes - progressDeadlineSeconds 未正确超时
- python - QTableWidget 中的列宽
- python - 问题:jinja2.exceptions.TemplateSyntaxError:遇到未知标签'endwith'