在JS中应该如何分隔route.param常量?

我的Reaction Native应用程序中包含以下内容:

Hub.js

export default class Hub extends Component {
    static navigationOptions = {
        header: null
    };

    ...

    render() {
        return (
            <View style={{flex: 1}}>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 1',
                            });
                          }}
                        >
                            <Text>Practice Test #1</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 3',
                            });
                          }}>
                            <Text>Practice Test #3</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 5',
                            });
                          }}
                        >
                            <Text>Practice Test #5</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        onPress={() => {
                            this.props.navigation.navigate('Link', {
                              site: 'CB Practice Test 6',
                            });
                          }}
                        >
                            <Text>Practice Test #6</Text>
                        </TouchableOpacity>
                    </View>
            </View>
        )
    }
}

webviewsFolder/Links.js

export default function Links({ route }) {
   
    const link = route.params.site ===
    'CB Practice Test 1' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-1.pdf' :
    'CB Practice Test 3' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-3.pdf' :
    'CB Practice Test 5' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-5.pdf' :
    'CB Practice Test 6' ? 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-6.pdf' :
    'https://www.kaggle.com/';

  return <WebView source={{ uri: link }} />;
}
我的问题是只有CB Practice Test 1CB Practice Test 3返回它们应该返回的页面,但是CB Practice Test 5&;6的按钮将返回CB Practice Test 3的url。我不知道为什么会发生这种情况,我认为可能是语法错误,但如果是这样,我不确定这是什么,也不确定如何解决它。


解决方案

解决方案

  1. 尝试将"Link"更改为"Links"

this.props.navigation.navigate('Link', { site: 'CB Practice Test 1', });

  1. 或尝试使用大小写替换速记。

    export default function Links({route}){
    let link;
    switch(route.params.site){case 'CB Practice Test 1':
        link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-1.pdf'
    case 'CB Practice Test 3':
        link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-3.pdf'
    case 'CB Practice Test 5':
        link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-5.pdf'
    case 'CB Practice Test 6':
        link = 'https://collegereadiness.collegeboard.org/pdf/sat-practice-test-6.pdf'
    }
    default:
    'https://www.kaggle.com/';
    }
    return <WebView source={{ uri: link }} />;
    

相关文章