Question

我正在尝试创建一个显示自定义组件列表的视图。这很基本，但是在加载组件之后列表为空。

该组件的定义如下。

import React, { Component } from "react";
import { Text, View, Image } from 'react-native';
import { Container, Icon } from 'native-base';

export default class PlaceVoting extends Component {
    render() {
      return(
        <Container>
          <View style={{ flex: 1,flexDirection: 'row',justifyContent: 'space-between', paddingLeft: 20, paddingRight: 20 }}>
            <View>
                <Text style={{ fontSize: 17 }}>{ this.props.name }</Text>
            </View>
            <View>
                { this.props.voted ? <Icon name='star' style={{ color: 'yellow',fontSize: 17 }} /> : <Icon name='star-outline' style={{ color: 'yellow',fontSize: 17 }} />}
            </View>              
          </View>
        </Container>
      )
    }
  }

数据作为数组接收。

import React, { Component } from "react";
import { Text, View, Image } from 'react-native';
import { TouchableNativeFeedback } from 'react-native';
import { Container } from 'native-base';
import PlaceVoting from '../PlaceVoting';

export default class PlaceVotingList extends Component {
    render() {
        {
            return (
                <Container>
                    <View>
                        {
                            this.props.places.map((place) => {
                                <PlaceVoting key={place.id} name={place.name} voted={place.voted} />
                            })
                        }
                    </View>
                </Container>
            )
        }     
    }
  }

我正在使用Storybook进行开发，并使用该代码预览我的故事。

storiesOf('Place Voting List', module)
  .add('Not Empty', () =>
    (
        <PlaceVotingList 
            places={[ 
                { id: 1, name: 'Teste 1', voted: true }, 
                { id: 2, name: 'Teste 2', voted: false }, 
                { id: 3, name: 'Teste 3', voted: false } 
            ]} />
    ),
  )

显然，这是正确的。通过调试，我可以看到在render函数中正确接收了这些值。

不幸的是，在渲染功能结束时，屏幕为空，我不知道为什么。

任何帮助将不胜感激！

Answer 1

您需要在映射数组后返回组件。我认为这会起作用。

<Container>
<View>
  {
   this.props.places.map((place) => {
    return <PlaceVoting key={place.id} name={place.name} voted={place.voted} />
   })
  }
</View>
</Container>

零件清单为空

1 个答案: