Question

我要做的是创建一个动态函数，根据标题的内容更改所需的图像。

我已经试过if语句没有成功，虽然我仍然是新的反应原生，我相信切换案例很难在这种情况下，如果不可能，但我把它留在那里，以帮助表明我的观点。

我想要做的是传入的标签的标题，看看它是否与三者中的一个相匹配，如果是，那么我将所需的图像设置为var图标并将其放入返回图像。

它会回来时没有任何错误，但没有图像，任何想法都会受到赞赏。

＆＃13;

import React from 'react';
import styles from './styling/style.js';
import {StyleSheet, Text, Image, View} from 'react-native';
import {Router, Scene } from 'react-native-router-flux';
import Homepage from './homepage.js';
import Workout from './workouts';
import Settings from './settings';

const TabIcon = ({ selected, title}) => {
	switch ({title}) {
    case Homepage:
      var icon = require("./images/tabHomePageIcon.png");
      break;
    case Workout:
      var icon = require("./images/tabWorkoutIcon.png");
      break;
    case Settings:
      var icon = require("./images/tabSettingIcon.png");
      break;
  }

  return (
    <View>
      <Image source={icon}></Image>
      <Text>{title}</Text>
    </View>
  );
};

const UniversalTitle = ({selected, title}) => {
    return (
        <Text style={styles.text}>
            Ultimate Fitness Tracker {'\n'}
        <Text style={styles.textBody}>The most comprehensive tracker available!
        </Text>
        </Text>
    )
};

export default class Index extends React.Component {
render() {
  return (
  <Router>
    <Scene key='root'>
      <Scene key='tabbar' tabs tabBarStyle={styles.footer}>
        <Scene key='tabHome' title='Homepage' titleStyle={styles.text} icon={TabIcon}>
          <Scene key='pageOne' navigationBarStyle={styles.heading} component={Homepage} renderTitle={UniversalTitle} initial />
        </Scene>
        <Scene key='tabWorkout' titleStyle={styles.text} title='Workout' icon={TabIcon}>
          <Scene key='pageTwo' component={Workout} navigationBarStyle={styles.heading} renderTitle={UniversalTitle} />
        </Scene>
        <Scene key='tabSettings' titleStyle={styles.text} title='Setting' icon={TabIcon}>
          <Scene key='pageThree' component={Settings} navigationBarStyle={styles.heading} renderTitle={UniversalTitle} />
        </Scene>
      </Scene>
    </Scene>
  </Router>
  )
}
}

＆＃13;

Answer 1

在TabIcon Component中，您已编写

switch ({title})

应该是

switch (title)

并在switch语句之前声明变量 icon 。

试试这个。

const TabIcon = ({ selected, title}) => {
    let icon 
    switch (title) {
    case Homepage:
      icon = require("./images/tabHomePageIcon.png");
      break;
    case Workout:
      icon = require("./images/tabWorkoutIcon.png");
      break;
    case Settings:
      icon = require("./images/tabSettingIcon.png");
      break;
  }

  return (
    <View>
      {icon && <Image source={icon}></Image>} 
      <Text>{title}</Text>
    </View>
  );
};

希望，它解决了你的问题。

React Native尝试根据标题更改所需的图像

1 个答案: