切换案例后 React Native 中的图像

Question

我有一个要显示的图像列表，但无法动态显示。所以，我做了一个巨大的 switch case 来知道每次显示哪个图像：不在页面的渲染中，我做了 renderImage: 一个包含 switch case 的函数，然后在组件本身的渲染中我使用 renderImage 但我每次都得到 Null （我设置的默认值）。这是我使用的代码：

class CountryDetails extends Component {
    constructor(props) {
        super(props);
        fl =  this.props.flag
    };

    static propTypes = {
        popRoute: React.PropTypes.func,
        navigation: React.PropTypes.shape({
            key: React.PropTypes.string,
        }),
    }

    popRoute() {
        this.props.popRoute(this.props.navigation.key);
    }

    render() {
        console.log('image ' , fl)
        return (
            <Container>
                <Header style={{  backgroundColor: '#C0C0C0' }} hasTabs>

                    <Body>
                    <Text style={{ color: '#FFF', fontSize:17, fontWeight:'bold'}}> {this.props.name} </Text>
                    </Body>
                    <Right>
                        <View> {this.renderImage()} </View>
                    </Right>
                </Header>
            </Container>
        );
    }

renderImage() {
   console.log('image ' , fl)
    switch (fl)
        {
        case 'image1':
            return (
        <Image source={require('path/image1.png')}/>
   );
case 'image2':
        return (
     <Image 
               source={require('path/image2.png')}/>     );
    case 'image3':
        return ( 
<Image 
               source={require('path/image3.png')}/>    );
default:
        return (
        <View >
            <Text>{'Null'}</Text>
        </View>
        );
}}}

我每次都在屏幕上得到 Null，这是我设置的默认值。

在尝试 <View> {this.renderImage()} <View/> 之后我得到这个错误：

RawText "" must be wrapped in an explicit <Text> component.

PS 我的渲染方法中还有其他组件 return，例如标题和页脚。

Answer 1

我认为这不是使用 Image 的正确方法。试试下面的代码：

// .. rest of the code
render() {
  return (
    <View>
      {this.renderImage()}
    </View>
  )
}

renderImage() {
  switch (img) {
    case 'image1':
        return (<Image source={require('path/image1.png')}/> );
    // .. rest of the case
    default:
        return (
            <Text>{'Null'}</Text>
        );
  }
}

切换案例后 React Native 中的图像

Images in React native after switch case

state

image

switch-statement

react-native