Корпус выключателя Не работает в Реагенте Native

Question

Я относительно новичок в JS и RN. Но я сам застрял в этом беспорядке.

Я, в React Native, пытаюсь вызвать рендеринг значка с изображением «Ранг», который будет меняться в зависимости от того, что вызов будет использовать для id.

Для этого я вызываю js-файл с коммутатором в функции, так что, в зависимости от идентификатора, я называю Rank с, он будет возвращать разные.

Мой код в настоящее время выглядит следующим образом:

'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

Идентификатор передается в реквизитах компонента Ранга. Вы должны получить доступ к этому 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;