Question

代码的注释部分按预期工作，但是我想动态构建此屏幕，因此，我尝试将注释的代码取出并放入其自己的.js文件中。

很明显我做错了，因为我遇到一个props.navigation.navigate不确定的问题。任何见解都将不胜感激！

如果您要取消注释并删除“ FirstKey”，此代码将正常运行

    import React from 'react';
    import { ScrollView, View, StyleSheet, Image } from 'react-native';

    import HomeButton from '../components/HomeButton';
    import FuncButton from '../components/FuncButton';
    import TextBold from '../components/TextBold';
    import TextRegular from '../components/TextRegular';

    import FirstKey from '../components/environments/FirstKey';

    const FirstKeyScreen = props => {

        /*
        // Temporary Array of Names
        var firstKeyArray = [ 
            "THE BLUE TENT", 
            "THE SACRED BREAT", 
            "LEAF IN THE WIND",
            "TOUCH OF LIGHT",
            "THE WATERFALL",
            "CAVE AND CARVING STONE",
            "THE GREAT RAVINE" ];

        createFirstKeyFuncButtons = () => {
            let funcButtons = [];
            for (let i = 0; i < firstKeyArray.length; i++) {
                funcButtons.push(<FuncButton key={i} title={firstKeyArray[i]} onPress={() => {
                            props.navigation.navigate('Player', { title: firstKeyArray[i] })}}
                        />);

            }
            return funcButtons;
        }
        */

        return (
            <ScrollView>
                <View style={styles.screen}>
                    <View style={styles.buttonContainer}>
                        <HomeButton style={{width: 150, height: 150}} onPress={() => {
                            props.navigation.navigate({routeName: 'Home'})}}
                        />
                    </View>
                    <View>
                        <FirstKey />
                        {/*
                        <TextBold style={styles.titleFont}>FIRST KEY ENVIRONMENTS</TextBold>
                        {this.createFirstKeyFuncButtons()}
                        */}
                    </View>
                </View>
            </ScrollView>
        );
    };

    const styles = StyleSheet.create({
        screen: {
            flex: 1,
            paddingBottom: 10
        },
        buttonContainer: {
            marginTop: 20,
            alignItems: 'center',
        },
        titleFont: {
            textAlign: 'center',
            fontSize: 32,
            paddingBottom: 20,
            paddingTop: 50
        }
    });

    export default FirstKeyScreen;

这是我尝试提取该代码并将其放入自己的文件（FirstKey.js）

    import React from 'react';
    import { StyleSheet, View } from 'react-native';

    import FuncButton from '../FuncButton';
    import TextBold from '../TextBold';
    import TextReguar from '../TextRegular';

    const FirstKey = props => {

        // Temporary Array of Names
        var firstKeyArray = [ 
            "THE BLUE TENT", 
            "THE SACRED BREAT", 
            "LEAF IN THE WIND",
            "TOUCH OF LIGHT",
            "THE WATERFALL",
            "CAVE AND CARVING STONE",
            "THE GREAT RAVINE" ];

        createFirstKeyFuncButtons = () => {
            let funcButtons = [];
            for (let i = 0; i < firstKeyArray.length; i++) {
                funcButtons.push(<FuncButton key={i} title={firstKeyArray[i]} onPress={() => {
                    props.navigation.navigate('Player', { title: firstKeyArray[i] })}}
                />);

            }
            return funcButtons;
        }

        return (
            <View>
                <TextBold style={styles.titleFont}>FIRST KEY ENVIRONMENTS</TextBold>
                {this.createFirstKeyFuncButtons()}
            </View>
        );
    }

    styles = StyleSheet.create({
        titleFont: {
            textAlign: 'center',
            fontSize: 32,
            paddingBottom: 20,
            paddingTop: 50
        }
    });

    export default FirstKey;

我的假设是，在FirstKey.js文件中调用的道具指向自身，而没有指向FirstKeyScreen.js中的道具。我以为解决方案盯着我，但我只是看不到它。 XD

Answer 1

尝试：先const FirstKey = ({navigation}) => {...，然后再navigation.navigate(...，不要props.

和：

<View>
                        <FirstKey navigation={props.navigation} /> <---CHANGE
                        {/*
                        <TextBold style={styles.titleFont}>FIRST KEY ENVIRONMENTS</TextBold>
                        {this.createFirstKeyFuncButtons()}
                        */}
                    </View>

Answer 2

onPress = {（）=> {props.navigation.navigate（'Player'，{标题：firstKeyArray [i]}）}}}

首先，您走错路了！

setp 1您的数组firstkeyArray [i]插入某个数组

例如：var temp = []

  for (let i = 0; i < firstKeyArray.length; i++) {
    ->    temp.push(firstKeyArray[i]); 
       funcButtons.push(<FuncButton key={i} title={firstKeyArray[i]} onPress={() => {
    ->               props.navigation.navigate('Player', { title: temp })}}
                />);

我想我需要将道具传递给子组件吗？

2 个答案: