加载随机屏幕瓦特/反应本机导航

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] } 
});