加載隨機屏幕瓦特/反應本機導航

Question

我試圖建立一個應用程序在原生反應，你點擊一個按鈕，它加載一個隨機屏幕。很簡單，但我無法讓導航工作。

import React from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    Button, 
    StyleSheet, 
    Image, 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

import Slide0 from './slides/0'; 
import Slide1 from './slides/1'; 
import Slide2 from './slides/2'; 

randomScreen = Math.floor(Math.random() * 2); 

class HomeScreen extends React.Component { 

static navigationOptions = { 
    title: 'Home', 
    }; 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View style={styles.container}> 
     <Image 
     source={require('./assets/icons/app-icon.png')} 
     /> 
     <Text style={{ marginTop: 100 }}>Welcome to Dementia Care Activities.</Text> 
     <Text style={{ marginTop: 100 }}>{randomScreen}</Text> 
     <Button 
      onPress={() => navigate('Slide0')} 
      title="Load Random Slide" 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
}); 



const SimpleAppNavigator = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Slide0: { screen: Slide0 } 
}); 

const AppNavigation =() => (
    <SimpleAppNavigator /> 
); 

export default class App extends React.Component { 
    render() { 
    return (
     <AppNavigation/> 
    ); 
    } 
} 

所以我想randomScreen設置爲一個數字，並沒有工作，我可以看到它的，但我只是無法弄清楚如何將這一數字到

const SimpleAppNavigator = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Slide0: { screen: SlideINSERT-RANDOM-NUMBER } 
}); 

Answer 1

你可以創建一個Screen對象列表。這可能看起來有點多餘，因爲你包含整數來區分屏幕對象，但是如果您決定將這些對象名稱更改爲不同的東西，那麼地圖已經涵蓋了您。因此，像：

const screens = [Screen0, Screen1] 

然後：

const SimpleAppNavigator = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Slide0: { screen: screens[randomScreen] } 
});