Question

我有一个我要显示的图像列表，我不能动态地这样做。所以，我做了一个巨大的切换案例，知道每次要显示哪个图像：没有在页面的渲染中，我创建了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 我还有其他组件可以在我的渲染方法中返回，例如标题和页脚。

Answer 1

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

＆＃13;

// .. 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>
        );
  }
}

＆＃13;

切换案例后React原生图像

1 个答案: