FlatListが行をレンダリングしない

sree_iphonedev

私はreact-nativeのFlatListコンポーネントを学ぼうとしています。チュートリアルを見て、スクロールビュー内のコンポーネントを一覧表示するサンプルアプリケーションを実装しました。scrollviewをFlatListに置き換えようとしていますが、アイテムが画面にレンダリングされていません。ここにメインのソースコードを含めました。

App.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  ScrollView,
  FlatList
} from 'react-native'
import ColorButton from './components/ColorButton'

class App extends Component {

  constructor() { 
    super()
    this.state = {
      backgroundColor: 'blue'
    }

    this.changeColor = this.changeColor.bind(this)
  }

  changeColor(backgroundColor) {
    this.setState({backgroundColor})
  }

  render() {
    const { backgroundColor } = this.state
    return(
      <FlatList 
        data = {'red', 'green', 'salmon'} 
        renderItem = {(color) => {
          <ColorButton backgroundColor={color} onSelect={this.changeColor}></ColorButton>
        } } />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20
  }
})

export default App

ColorButton.js

import React from 'react'
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight
} from 'react-native'

const ColorButton = ({ backgroundColor, onSelect=f=>f }) => (
    <TouchableHighlight 
        style = {styles.button} 
        onPress={() => onSelect(backgroundColor)} 
        underlayColor="orange">

        <View style = {styles.row}>
            <View style = {[styles.sample, {backgroundColor}]} />
            <Text style = {styles.text}>backgroundColor</Text>
        </View>
    </TouchableHighlight>
)

const styles = StyleSheet.create({
    button: {
      margin: 10,
      padding: 10,
      borderWidth: 2,
      borderRadius: 10,
      alignSelf: 'stretch',
      backgroundColor: 'rgba(255,255,255,0.8)'
    },
    row: {
      flexDirection: 'row',
      alignItems: 'center'
    },
    sample: {
      height: 20,
      width: 20,
      borderRadius: 10,
      margin: 5,
      backgroundColor: 'white'
    },
    text: {
      fontSize: 30,
      margin: 5
    }
  })

  export default ColorButton
Gaurav Roy

フラットリストのコードを次のコードに変更します。

   <FlatList 
    data = {['red', 'green', 'salmon']} 
    renderItem = {({item}) => {
      <ColorButton backgroundColor={item} onSelect={this.changeColor}> 
    </ColorButton>
    } } />

それが役に立てば幸い。疑問がある場合はお気軽に

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ng-tableが行をレンダリングしない

分類Dev

FlatListがレンダリングされない

分類Dev

プロップが変更されたときにReactネイティブのFlatListが行を再レンダリングしない

分類Dev

プロップが変更されたときにReactネイティブのFlatListが行を再レンダリングしない

分類Dev

プロップが変更されたときにReactネイティブのFlatListが行を再レンダリングしない

分類Dev

FlatListがjson配列React-nativeからのデータをレンダリングしない

分類Dev

TwigがHTMLタグをレンダリングしない

分類Dev

コンテンツが十分でない場合でも、リストの下部にFlatListフッターをレンダリングします

分類Dev

Firefoxがsvgを正しくレンダリングしない

分類Dev

リストがページ外に拡張されていない場合は、FlatListフッターを下部にレンダリングします

分類Dev

React Routerがページをレンダリングしない

分類Dev

Firefoxが最小の高さをレンダリングしない

分類Dev

OpenGLが色をレンダリングしない

分類Dev

AngularUniversalがルートをレンダリングしない

分類Dev

酵素 `mount`が` Route`要素をレンダリングしない

分類Dev

c ++ cudaopenglがvboをレンダリングしない

分類Dev

UItextfieldが背景色をレンダリングしない

分類Dev

ReactjsがHelloWorldをレンダリングしない

分類Dev

OpenGLが図をレンダリングしない

分類Dev

ルーターが子をレンダリングしない

分類Dev

Wkhtmltopdfが画像をレンダリングしない

分類Dev

ApacheがBugzillacgiをレンダリングしない

分類Dev

android:tabhostがタブをレンダリングしない

分類Dev

MeteorTemplate.myTemplate.helpersが出力をレンダリングしない

分類Dev

express.jsejsがHTMLをレンダリングしない

分類Dev

RenderBodyがビューをレンダリングしない

分類Dev

AngularJSとInternetExplorerがAngularJSをレンダリングしない

分類Dev

RAILSがjs.erbをレンダリングしない

分類Dev

Expressがページをレンダリングしない

Related 関連記事

  1. 1

    ng-tableが行をレンダリングしない

  2. 2

    FlatListがレンダリングされない

  3. 3

    プロップが変更されたときにReactネイティブのFlatListが行を再レンダリングしない

  4. 4

    プロップが変更されたときにReactネイティブのFlatListが行を再レンダリングしない

  5. 5

    プロップが変更されたときにReactネイティブのFlatListが行を再レンダリングしない

  6. 6

    FlatListがjson配列React-nativeからのデータをレンダリングしない

  7. 7

    TwigがHTMLタグをレンダリングしない

  8. 8

    コンテンツが十分でない場合でも、リストの下部にFlatListフッターをレンダリングします

  9. 9

    Firefoxがsvgを正しくレンダリングしない

  10. 10

    リストがページ外に拡張されていない場合は、FlatListフッターを下部にレンダリングします

  11. 11

    React Routerがページをレンダリングしない

  12. 12

    Firefoxが最小の高さをレンダリングしない

  13. 13

    OpenGLが色をレンダリングしない

  14. 14

    AngularUniversalがルートをレンダリングしない

  15. 15

    酵素 `mount`が` Route`要素をレンダリングしない

  16. 16

    c ++ cudaopenglがvboをレンダリングしない

  17. 17

    UItextfieldが背景色をレンダリングしない

  18. 18

    ReactjsがHelloWorldをレンダリングしない

  19. 19

    OpenGLが図をレンダリングしない

  20. 20

    ルーターが子をレンダリングしない

  21. 21

    Wkhtmltopdfが画像をレンダリングしない

  22. 22

    ApacheがBugzillacgiをレンダリングしない

  23. 23

    android:tabhostがタブをレンダリングしない

  24. 24

    MeteorTemplate.myTemplate.helpersが出力をレンダリングしない

  25. 25

    express.jsejsがHTMLをレンダリングしない

  26. 26

    RenderBodyがビューをレンダリングしない

  27. 27

    AngularJSとInternetExplorerがAngularJSをレンダリングしない

  28. 28

    RAILSがjs.erbをレンダリングしない

  29. 29

    Expressがページをレンダリングしない

ホットタグ

アーカイブ