有没有办法通过反应导航有条件地处理单独的 js 文件中的 const？

Question

我的 React Native 应用程序中有以下内容：

Hub.js:

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

    constructor(props){
        super(props);

        this.state = {
        }
    }

    render() {
        return (
            <View style={{flex: 1}}>
                        <TouchableOpacity
                        onPress={() => this.props.navigation.navigate("Links")}
                        >
                            <Text>Link #1</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                        onPress={() => this.props.navigation.navigate("Links")}>
                            <Text>Link #2</Text>
                        </TouchableOpacity>
                    </View>
            </View>
        )
    }
}

webviewsFolder/Links.js:

export default function Links() {

    const links = ['https://www.youtube.com/', 'https://www.google.com/'];

    return <WebView source={{ uri: links[0] }} />;
}

我想设置我的应用程序，以便单击 Link #1 按钮导致 Links.js 返回 youtube（又名链接 [0]），单击 Link #2 按钮导致 Links.js 返回 google（链接[1]）。我该怎么做？

Answer 1

您可以在导航的同时传递参数

this.props.navigation.navigate("Links",{site:"Youtube"})

或

this.props.navigation.navigate("Links",{site:"Google"})

在 Links.js 中

export default function Links({route}) {

    const link = route.params.site==='Google'?'https://www.google.com/':'https://www.youtube.com/';

    return <WebView source={{ uri: link }} />;
}

您可以有一个开关，甚至可以直接从其他组件传递 url 并在链接组件中使用它。