logo标签列表

React Native导航时屏幕空白，没有错误代码

react-nativeaxiosreact-navigation
4
请查看调试器和屏幕以了解可能存在的问题。但是，以下是高度显示的代码供您审查。 此外，我旨在基于所选内容的id导航到另一页。
App.js enter image description here 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({

});
请发布 styles.container 代码 - ValdaXD
5个回答
4

我没有测试这段代码，但是尝试在你的容器样式中添加 flex: 1。如果没有告诉它们要拉伸，主要容器/组件就不会被拉伸。

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F3F3F3',
    flex: 1,
  }
});

此外，为了检查组件是否渲染（有助于调试问题所在），请在每个组件的 componentDidMount 中编写控制台日志。如果它们已经挂载，但没有任何可见内容，则很可能是 CSS 问题。如果不是CSS问题，将会抛出错误而不是空白屏幕。
第二个问题是，在使用react-navigation进行导航时，需要使用参数。语法如下：
this.props.navigation.navigate('PostSingleScreen', { params })

那么，如果你在参数中有{ id: someId }，在你导航到的组件中，你将会有{this.props.navigation.state.params.id}。所以基本上那些参数都在你导航过去的navigation.state.params里面。
让我试一下，然后再回复您。谢谢。 - Payne
@Payne，我会编辑我的答案并且也写出你第二个问题的解决方案。 - Luna
非常感谢。我对JavaScript和React Native还比较新手。有没有好的教程可以阅读？ - Payne
我似乎不太明白。看看我的Post.js。我有id = post.id，但我无法在readMore()中使用它，而且如果this.props.navigation.state.params.id是我在新页面上获取的内容，我该如何使用它来获取类似http://localhost/rest_api_myblog/api/post/read_single.php?id=1这样的东西？ - Payne
该死，它没有通知我你已经发布了风格...我也要说同样的话：“U..好吧，我迟到了。 - ValdaXD
显示剩余2条评论
1
如果您正在使用 react-navigation 5.x，那么可能会出现添加 CSS 的情况。
alignItems: "center"

将它添加到您的根文件，即 App.js 或 index.js。我只是删除了它，然后它就可以正常工作了。
1
我建议使用 flaltist 而不是 this.state.map。这样可以得到相同的结果。
readMore(id){
 //do whatever you want with the id
       this.props.navigation.navigate('PostSingleScreen',{id:id}); //or pass it as a prop
       debugger;
     } 

renderItem = ({ item, index }) => {
    return (
       <View key={index} style={styles.container}>
                        <Text style={styles.display}>
                            Author:  {item.author}
                        </Text>
                        <Text style={styles.display}>
                            Category: {item.category_name}
                        </Text>
                        <Text style={styles.display}>
                            Title: {item.title}
                        </Text>
                        <Text style={{overflow:'hidden'}}>
                            Id: {item.id}
                        </Text>
                     <TouchableOpacity style={styles.buttonContainer}
                     onPress = {() => this.readMore(item.id)}
                     >
                        <Text style={styles.buttonText}>

                            Read More
                        </Text>
                     </TouchableOpacity>

                     </View> 
    );
  };

render(){
        return (
        <View style={{flex:1}}>
         <FlatList
          style={{flex:1}}
          data={this.state.posts}
          renderItem={this.renderItem}
          numColumns={1} 
          keyExtractor={(item, index) => item.id} //this needs to be a unique id
          ListHeaderComponent = {
            <View style={styles.header}>
                <Text style={styles.headerText}>Gist Monger</Text>
            </View>}
        />
        <View style={styles.footer}/>
        </View>
        );
    }
如何将其传递到 localhost/rest_api_myblog/api/post/read_single.php?id=1 而不是 {id:id} 中的一个？ - Payne
你可以创建一个字符串并在那里使用它。 - ValdaXD
在readmore函数中添加var p = "localhost/rest_api_myblog/api/post/read_single.php?id="+id，然后你应该得到预期的输出，你可以随意使用这个链接，甚至可以通过它进行导航。 - ValdaXD
1

让我来帮助你解决第二个问题。首先，在导航中只需指定参数即可轻松实现。例如，

readMore = (id) => {

    this.props.navigation.navigate('PostSingleScreen', {id:id})

     }

然而，在您的TouchableOpacity中，onPress方法即onPress = {() => this.readMore(post.id)}

在您的PostSingle.js文件中

import React, { Component } from 'react';
import {
    StyleSheet,
    View, 
    Text,
    Button

} from 'react-native';

import axios from 'axios';

class PostSingle extends Component{
    constructor(props){
        super(props);
        this.state = {
            posts: []
        }
    }


 componentDidMount() {
    const id = this.props.navigation.state.params.id;
    axios.get(`http://localhost/rest_api_myblog/api/post/read_single.php?id=${id}`)
    .then(json => json.data)
   .then(newData => this.setState({posts: newData}))
   .catch(error => alert(error))

 }  
    render(){
        return (

        <View style={styles.container}>
              <Text style={styles.display}>
                           {this.state.posts.title}
              </Text>
              <Text style={styles.display}>
                            {this.state.posts.author}
              </Text>
              <Text style={styles.display}>
                            {this.state.posts.category_name}
              </Text>
              <Text style={styles.display}>
                          {this.state.posts.body}
              </Text>  
        </View>
        );
    }
}

我希望它能帮助到您

哇，这正是我需要的。非常感谢你。 - Payne
1
我也遇到了同样的问题，但是没有任何解决方案奏效。经过一些调试，我找到了问题的根源。以下是我的旧代码，放置在App.js文件中，其中我调用了 AppNavigation 组件。
旧代码： 
     export default function App() {
        return (
          <View style={styles.container}>
            <AppNavigation/>
            <StatusBar style="auto" />
         </View>
            );
        }

这是我更新后的App.js文件，我删除了所有内容，并且只返回了AppNavigation组件。

新代码：

    export default function App() {
      return (
        <AppNavigation/>
      );
    }

我希望这对某人有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接