javascript - Switch Case 在 React Native 中不起作用

Question

我对 JS 和 RN 比较陌生。但是我自己陷入了这个烂摊子。

我在 React Native 中尝试调用描绘“Rank”的徽章的呈现，这将根据调用将用于 id 的内容而改变。

为此，我在函数中调用一个带有 Switch 的 js 文件，以便根据调用 Rank 时使用的 id，它将返回不同的 id。

我的代码目前看起来像这样:

'use strict';
import React, {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';

var colors = require('../Styles/colorscheme');
import {Actions} from 'react-native-router-flux';

var id = this.id;
var Rank = React.createClass({
  render: function() {
    switch (id) {
      case 'smallone':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} />
          </View>
          );
      case 'bigone':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} />
          </View>
          );
      case 'smalltwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} />
            <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} />
          </View>
          );
      case 'bigtwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} />
            <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} />
          </View>
          );
      default:
        return (
          <View style={styles.lvl2}>
            <Text>Null</Text>
          </View>
          );
      }
    }
  });

var styles = StyleSheet.create({
  lvl2: {
    flexDirection: 'row',
    backgroundColor: colors.General.background,
    justifyContent: 'center',
    alignItems: 'center',
  },
  lvl1: {
    padding: 10,
    flexDirection: 'row',
    backgroundColor: colors.General.hardline,
    justifyContent: 'center',
    alignItems: 'center',
  },  
});

module.exports = Rank;

我简单地称之为:

var Rank = require('../Components/Rank')
.
.
.
<Rank id={'smallone'} />

但它总是返回默认值。我在声明变量等方面尝试了许多不同的变体。但是我不知道哪里出了问题。

Answer 1

id 在 props 中传递给排名组件。您需要访问那个 this.props.id

'use strict';
import React, {
  StyleSheet,
  View,
  Text,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';

var colors = require('../Styles/colorscheme');
import {Actions} from 'react-native-router-flux';

var id = this.id;
var Rank = React.createClass({
  render: function() {
    switch (this.props.id) {
      case 'smallone':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} />
          </View>
          );
      case 'bigone':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} />
          </View>
          );
      case 'smalltwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} />
            <Image source={require('../img/full_star_small@10x.png')} style={{padding: 10}} />
          </View>
          );
      case 'bigtwo':
        return (
          <View style={styles.lvl2}>
            <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} />
            <Image source={require('../img/full_star@10x.png')} style={{padding: 10}} />
          </View>
          );
      default:
        return (
          <View style={styles.lvl2}>
            <Text>Null</Text>
          </View>
          );
      }
    }
  });

var styles = StyleSheet.create({
  lvl2: {
    flexDirection: 'row',
    backgroundColor: colors.General.background,
    justifyContent: 'center',
    alignItems: 'center',
  },
  lvl1: {
    padding: 10,
    flexDirection: 'row',
    backgroundColor: colors.General.hardline,
    justifyContent: 'center',
    alignItems: 'center',
  },  
});

module.exports = Rank;