Question

我是RN的新手，正尝试通过尝试解决它，并且经常出错。我目前对此感到困惑：

我有一个这样的父视图：

import React, { Component } from 'react';
import { View, Image, Text, Button } from 'react-native';

class ParentView extends Component {
    render() {
        return(
            <View style={{flex:1}}>
                <View style={{flex:0.14, flexDirection:'row', alignItems:'center'}}>
                    <View style={{flex:1}}>
                        <Image
                            source = {require('./assets/image1.png')}
                            resizeMode= 'contain'
                            style={{flex:1, height:null, width:null}}
                        />
                    </View>
                    <View style={{flex:3}}>
                        <Button title='dummytitle' onPress={() => this.props.navigation.navigate('Child', {
                            dbpath: 'db.category.subcategory',
                            })}
                        />
                    </View>

等...

这部分工作正常。在子视图中，我正在尝试从类似这样的文件中导入JSON数据：

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Image, StyleSheet } from 'react-native';
import AwesomeAlert from 'react-native-awesome-alerts';
import db from './db/quizDB';


class Quiz extends Component {

    constructor(props) {
        super(props);
        this.qno = 0
        this.score = 0
        quiz = this.props.navigation.getParam('dbpath');
        arrnew = Object.keys(quiz).map(function(k) {return quiz[k]});
        this.state = { 
            question: arrnew[this.qno].question,
        }
    };

    render() {
        return(
            <View style={{flex:1}}>
                <View style={{flex:2}}>
                    <View style={styles.Question}>
                        <Text>{this.state.question}</Text>
                    </View>

等等。

{this.state.question}不返回任何内容，只是空的。但是，如果我将测验硬编码为quiz = db.category.subcategory，它确实可以工作，则{this.state.question}会显示预期的内容。

我在那里想念什么？似乎道具没有按照我的意愿进行处理...

Answer 1

您需要使用quiz或arrnew声明let和var，或将它们附加到状态。

此外，在React中，标准做法是不像在此所做的那样直接将属性附加到类实例上：

this.qno = 0 this.score = 0

这些可能应该是局部变量，但是如果需要，可以将它们附加到状态上。

Answer 2

解决了这个问题，我当时很蠢。我只是在父视图中导入了db，然后直接从那里设置测验道具。我的错误是将其设置为字符串...

传递给子视图的React Native Props无法按预期运行

2 个答案: