react-native - 带有反应本机导航的空白屏幕,没有错误代码
问题描述
请查看调试器和屏幕是否有问题。但是,代码在下面高度显示以供您阅读。此外,我的目标是根据所选内容的 id 导航到另一个页面。
App.js App.js 是我定义 stackNavigator 的地方
import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import Post from './components/Post';
import PostSingle from './components/PostSingle';
import { createStackNavigator, createAppContainer } from 'react-navigation';
const RootStack = createStackNavigator(
{
PostScreen: { screen: Post},
PostSingleScreen:{screen: PostSingle},
},
{
initialRouteName: "PostScreen"
}
);
const AppNavigator = createAppContainer(RootStack);
export default class App extends Component {
constructor(props) {
super(props);
};
render() {
return (
<View style={styles.container}>
<AppNavigator/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F3F3F3',
}
});
Post.js
我试图删除 alignItem = center。事实上,我删除了我的样式,看看是否有任何阻碍屏幕出现的东西。
import React, { Component } from 'react';
import {
ScrollView,
StyleSheet,
View,
Text,
InputText,
TouchableOpacity
} from 'react-native';
import axios from 'axios';
export default class Post extends Component{
constructor(props){
super(props);
this.state = {
posts: []
}
}
readMore = () => {
()=> this.props.navigation.navigate('PostSingleScreen');
debugger;
}
componentDidMount(){
axios.get(`http://localhost/rest_api_myblog/api/post/read.php`)
//.then(json => console.log(json.data.data[0].id))
.then(json => json.data.data.map(mydata =>(
{
title: mydata.title,
body: mydata.body,
author: mydata.author,
category_name: mydata.category_name,
id: mydata.id
}
)))
//.then(newData => console.log(newData))
.then(newData => this.setState({posts: newData}))
.catch(error => alert(error))
}
render(){
return (
<View>
<ScrollView style={styles.scrollContent}>
<View style={styles.header}>
<Text style={styles.headerText}>Gist Monger</Text>
</View>
{
this.state.posts.map((post, index) =>(
<View key={index} style={styles.container}>
<Text style={styles.display}>
Author: {post.author}
</Text>
<Text style={styles.display}>
Category: {post.category_name}
</Text>
<Text style={styles.display}>
Title: {post.title}
</Text>
<Text style={{overflow:'hidden'}}>
Id: {post.id}
</Text>
<TouchableOpacity style={styles.buttonContainer}
onPress = {() => this.readMore()}
>
<Text style={styles.buttonText}>
Read More
</Text>
</TouchableOpacity>
</View>
))
}
</ScrollView>
<View style={styles.footer}></View>
</View>
);
}
}
const styles = StyleSheet.create({
header: {
flex: 1,
height:40,
marginTop:50,
marginBottom:10,
flexDirection: 'row',
justifyContent:'center',
},
display: {
margin: 3,
fontSize: 16
},
headerText: {
fontWeight: 'bold',
fontSize: 40,
color: '#6200EE'
},
container: {
backgroundColor:'#efefef',
padding: 20,
margin: 5,
borderRadius:20,
justifyContent: 'center',
alignItems: 'center'
},
footer: {
flex: 1,
backgroundColor:'#000',
marginBottom:50
},
buttonContainer:{
height: 30,
width: 200,
marginTop: 15,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
backgroundColor:'#6200EE'
},
buttonText: {
alignContent: 'center',
color: 'white'
}
});
PostSingle.js
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text
} from 'react-native';
import axios from 'axios';
export default class Post extends Component{
constructor(props){
super(props);
}
render(){
return (
<View>
<Text>My text</Text>
</View>
);
}
}
const styles = StyleSheet.create({
});
解决方案
我没有测试这段代码,但尝试添加flex: 1
到您的容器样式中。如果您不告诉它们,主要容器/组件不会拉伸
const styles = StyleSheet.create({
container: {
backgroundColor: '#F3F3F3',
flex: 1,
}
});
此外,要检查组件是否呈现(有助于调试问题所在),请在每个组件的componentDidMount
. 如果它们挂载了,但什么都看不到,则很可能是 CSS 问题。如果不是,它会抛出错误而不是空白屏幕
第二个问题是,当您导航时,您需要使用 react-navigation 的参数。它的语法是这样的:
this.props.navigation.navigate('PostSingleScreen', { params })
因此,如果您的参数中有 { id: someId },那么在您导航到的组件中将有{this.props.navigation.state.params.id}
. 所以基本上这些参数navigation.state.params
在你导航的地方
推荐阅读
- javascript - 如何通过使用redux单击按钮在反应数据网格上添加行和列
- swift - 如何在 SwiftUI 中激活动画时读取点击的本地位置?
- postman - 在邮递员收藏中隐藏“无环境”
- flutter - 如何水平添加容器 - 颤振
- c# - 在 Blazor Webassembly 项目中使用 razor 组件库中的资源文件
- mongodb - 如何使用聚合在mongo查询中查找包含特殊字符的字符串
- android - 在 Android 中,在一个 api 调用中列出 api 调用
- xpath - 我如何提取第二个中的内容,CAT5 是我需要提取到 xpath 中的内容
- c# - 本地化器资源未在已发布版本中解析
- android - 联系我们了解 FrameLayout、ScrollView 和 BottomNavigationView 的设计