スイッチネクタティブでスイッチケースが機能しない

Question

JSとRNが比較的新しいです。しかし、私は自分自身をこの混乱にこだわってしまった。

私は、React Nativeにおいて、呼び出しがIDに使用するものに応じて変更される「ランク」を表すバッジのレンダリングを呼び出そうとしています。

これを行うには、私がランクと呼ぶIDに応じて異なるものを返すように、関数内にスイッチを持つjsファイルを呼び出しています。

私のコードは、現在、次のようになります。

'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;