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被传递给秩元件。你需要访问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;