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对象列表。它可能看起来多余，因为您包含整数来区分Screen对象，但如果您决定将这些对象名称更改为不同的对象名称，则地图将已经覆盖您。如下所示：

const screens = [Screen0, Screen1]

然后：

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

加载具有React Native Navigation的随机屏幕

1 个答案: