Question

我的第一个反应原生应用程序列出了印度的趋势广告，其中包含指向该项目的网络详细信息的超链接。

打印项目的代码部分如下。

Resources: PipelineRepo: Type: AWS::CodeCommit::Repository Properties: RepositoryName: pipeline RepositoryDescription: Pipeline setup repo PipelineArtifacts: Type: AWS::S3::Bucket PipelineRole: Type: AWS::IAM::Role Properties: AssumeRolePolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Principal: Service: - codepipeline.amazonaws.com - cloudformation.amazonaws.com Action: sts:AssumeRole Policies: - PolicyName: CloudPipelinePolicy PolicyDocument: Version: 2012-10-17 Statement: - Effect: Allow Action: "cloudformation:*" Resource: "*" - Effect: Allow Action: "codecommit:*" Resource: "*" - Effect: Allow Action: "s3:*" Resource: "*" - Effect: Allow Action: - iam:PassRole Resource: "*" Pipeline: Type: AWS::CodePipeline::Pipeline Properties: Name: pipeline-pipeline ArtifactStore: Type: S3 Location: Ref: PipelineArtifacts RoleArn: !GetAtt [PipelineRole, Arn] Stages: - Name: Source Actions: - Name: CheckoutSourceTemplate ActionTypeId: Category: Source Owner: AWS Version: 1 Provider: CodeCommit Configuration: PollForSourceChanges: True RepositoryName: !GetAtt [PipelineRepo, Name] BranchName: master OutputArtifacts: - Name: TemplateSource RunOrder: 1 - Name: Deploy Actions: - Name: CreateStack ActionTypeId: Category: Deploy Owner: AWS Provider: CloudFormation Version: 1 InputArtifacts: - Name: TemplateSource Configuration: ActionMode: CREATE_UPDATE RoleArn: !GetAtt [PipelineRole, Arn] StackName: pipeline Capabilities: CAPABILITY_IAM TemplatePath: TemplateSource::template.yml RunOrder: 1

我想学习如何设置列表中的项目样式以使其更好看。该项目的Web版本具有以下列表

如何设置项目的样式以使其看起来更具吸引力，更类似于我的网页外观并清楚地显示这些项目是否可点击？

<View style={{flex: 1, paddingTop:20}}>
              <FlatList
                  data={this.state.dataSource}
                  renderItem={({item}) =>      <Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(item.url) } >{item.title}</Text>
                  }
                  keyExtractor={(item, index) => index}
              />
          </View>

Answer 1

请试试这个。它会帮助你。

<View style={styles.mainWrapper} >
            <FlatList data={this.state.data} renderItem={this._renderList} />

        </View>

_Renderlist将呈现您的物品。您可以操纵它来满足您的需求。

_renderList = ({ item }) => {
    return (
        <TouchableWithoutFeedback onPress={(event) => this._selectedItem(item.key)}>
            <View style={styles.listRowContainer}>
                <View style={styles.listinside1Container}>
                    <Image style={styles.listImage} source={item.icon} />
                    <View style={styles.listContainer} onPress={(event) => this._selectedItem(item.text)}  >
                        <Text style={styles.listHeader} >{item.header}</Text>
                        <Text style={styles.listValue} >{item.value}</Text>
                    </View>
                </View>
                <Image style={styles.listimgArrow} source={require('../../../resources/toolbar/chevron_right_grey.png')} />
            </View>
        </TouchableWithoutFeedback>
    );

}

在渲染列表中，您可以创建供您使用的项目。

请告诉我。

查看列表中的项目与本机反应

1 个答案: