Question

我是新来的响应本机的人，刚刚开始开发应用程序。我在父容器的数组中有一个数据列表，想在子容器中显示。

父容器

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import GroupsScreen from './Groups';

 class GroupsContainer extends Component {

  static navigationOptions ={
    headerStyle: {backgroundColor: '#1b6ea8'},
    headerTintColor: 'white'
}
   constructor(props){
    super(props)
    this.state = {
      availableGroups: [
        { groupName: 'Sample 1', summary: 'bla bla bla' },
        { groupName: 'Sample 2',   summary: 'bla bla bla' },
        { groupName: 'Sample 3', summary: 'bla bla bla' },
        { groupName: 'Sample 4',summary:'bla bla bla' }
      ]
    }
   }

  render() {
    return (
     <GroupsScreen
       availableGroups = {this.state.availableGroups}
     />
    );
  }
}
export default GroupsContainer

子容器

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Icon, Left, Body, List } from 'native-base';

 class GroupsScreen extends Component {

  render() {
    return (
      <Container>
       <Content contentContainerStyle={{padding:5}}>
       <List dataArray={this.props.availableGroups}
       renderRow = {(item)=>
        <Card>
            <CardItem>
              <Left>
                <Thumbnail source={require(`../../assets/imgs/join_group.png`)} />
                <Body>
                  <Text style={{fontSize:18}}>{item.groupName}</Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem>
              <Body>
                <Text style={{fontSize:15}}>
                  {item.summary}
                </Text>
              </Body>
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent textStyle={{color: '#87838B'}}>
                  <Icon name="ios-people" />
                  <Text>1,926 people</Text>
                </Button>
              </Left>
            </CardItem>
            <Button style={{width:'90%', alignSelf:'center',margin:10}} block iconRight>
                  <Icon name="ios-people" />
                  <Text style={{fontSize:15, color:'white'}}>Join Group</Text>
                </Button>
          </Card>
            }>
       </List>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  }
});

export default GroupsScreen;

当页面打开时，没有呈现任何内容，它只是空白，当我检查控制台时，那里也没有显示错误。关于如何在子容器中呈现数据的任何帮助？

在react native中显示从父容器到子容器的数据列表

0 个答案: