React Native: Flatlist и Array - PullRequest
Новая
       4

React Native: Flatlist и Array

0 голосов
/ 26 марта 2019

это, конечно, общий вопрос, но я не могу отобразить FlatList с источником массива.

Я следую этому примеру: https://medium.com/javascript-in-plain-english/how-to-loop-through-arrays-in-react-3eaa8a14445

Пример начинается с: 

let shoppingCart = [

{id: 35, item: 'jumper', color: 'red', size: 'medium', price: 20},

{id: 42, item: 'shirt', color: 'blue', size: 'medium', price: 15},

{id: 71, item: 'socks', color: 'black', size: 'all', price: 5},

]

Вот как я на самом деле работаю, чтобы заполнить массив в моей работе.

Затем я следую инструкциям, договорившись: 

 this.items = this.shoppingCart.map((item, key) =>
 <View key={item.id}/> <Text>{item.name}</Text></View>
 );

И, наконец, я установил элементы в качестве источника FlatList: 

render(){
return  (
<FlatList style = {{flex : 1}}
        data={this.items}            
        keyExtractor={(item, index) => index}
        renderItem={({ item })=> {
            return item; }
    }/>   
  )
}

Не понимаю, почему у меня пустой экран ... Я пытался применить разные стили, но он ничего не показывает.

EDIT

Итак, я просто попробовал другой пример: 

render(){

    let shoppingCart = [

        {id: 35, item: 'jumper', color: 'red', size: 'medium', price: 20},

        {id: 42, item: 'shirt', color: 'blue', size: 'medium', price: 15},

        {id: 71, item: 'socks', color: 'black', size: 'all', price: 5},

        ]
const _renderItem = ({item}) => <Text>{item.color}</Text>

return  (
    <View style = {{background = '#444',flex : 1}}>
       <FlatList 
       data = {shoppingCart}
       renderItem = {_renderItem}/>

</View>
  )
}

А теперь у меня пустой экран с предупреждением о index.js не найден, даже если я сбросил кеш ...

Это довольно тревожно, я проделал огромную работу над бизнес-логикой и сложными вычислениями, но я не могу отобразить простой список ...

Может ли кто-нибудь помочь мне в этом вопросе?

EDIT

Я не могу объяснить, теперь у меня есть это сообщение: 

Looking for JS files in
D:\Projects\VSCode\projekt\node_modules\react-native\scripts

Loading dependency graph, done.
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:19 +0000] "GET /launch-js-  devtools HTTP/1.1" 200 - "-" "okhttp/3.12.1"
Error: Unable to resolve module `./index` from `D:\Projects\VSCode\projekt\node_modules\react-native\scripts/.`: The module `./index` could not be found from `D:\Projects\VSCode\projekt\node_modules\react-native\scripts/.`. Indeed, none of these files exist:
* `D:\Projects\VSCode\projekt\node_modules\react-native\scripts\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `D:\Projects\VSCode\projekt\node_modules\react-native\scripts\index\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
at ModuleResolver.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (D:\Projects\VSCode\projekt\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
at D:\Projects\VSCode\projekt\node_modules\metro\src\lib\transformHelpers.js:261:42
at Server.<anonymous> (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:1038:41)
at Generator.next (<anonymous>)
at asyncGeneratorStep (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:99:24)
at _next (D:\Projects\VSCode\projekt\node_modules\metro\src\Server.js:119:9)
::1 - - [26/Mar/2019:01:30:20 +0000] "GET /index.delta?platform=android&dev=true&minify=false&revisionId=291a9787399f7066 HTTP/1.1" 500 -   "http://localhost:8081/debugger-ui/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36"
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:29 +0000] "GET /onchange  HTTP/1.1" - - "-" "okhttp/3.12.1"
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:44 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"
::ffff:127.0.0.1 - - [26/Mar/2019:01:30:59 +0000] "GET /onchange HTTP/1.1" - - "-" "okhttp/3.12.1"

Почему простой FlatList вызывает столько проблем? Я снова попробовал все, что мог: сбросить кеш, удалить noe_modules, установить npm, ссылку npm ... но ... ничего не работает ...

EDIT

Извините за долгий вопрос, но моя богиня, React Native похожа на мою бывшую жену: 10 минут удовольствия в месяц, остальное время - это боль и проблемы ... Сейчас я нахожусь в цикле: я разрешаю индекс Проблема .js, а затем возникают другие проблемы: Не удается найти модуль '@ babel / runtime / helpers / builtin / interopRequireDefault' из 'index.js. Я решаю это ... и ... о да ... проблема .index.js появляется снова ... пффф ... что это?

ПОСЛЕДНИЕ РЕДАКТИРОВАТЬ ... ОТВЕТ

Наконец, я понял, что некоторые примеры, приведенные в Интернете, не работают; Синтаксические ошибки записываются и их невозможно запустить. И я с большой болью решил цикл ошибок. Проверяя весь мой код, где-то я сделал импорт с помощью: import {classX} из './classeX' ... Я заменяю на: import classX из './classeX' и мой мир изменился ... это сработало ... так , с большим количеством тестов, код ниже работает для меня: 

import React, { Component } from 'react';
import {StyleSheet,View,FlatList, Text, Image } from 'react-native';

export default class Test extends Component {

constructor(props) {
  super(props);
};

sampleData = [
{
  name: { title: 'mr', first: 'karl', last: 'johnson' },
  email: 'karl.johnson@example.com',
  picture: {
    thumbnail: 'https://randomuser.me/api/portraits/thumb/men/62.jpg',
  },
},
{
  name: { title: 'mrs', first: 'asuncion', last: 'gomez' },
  email: 'asuncion.gomez@example.com',
  picture: {
    thumbnail: 'https://randomuser.me/api/portraits/thumb/women/52.jpg',
  },
  nat: 'ES',
},
{
  name: { title: 'miss', first: 'gilcenira', last: 'ribeiro' },
  email: 'gilcenira.ribeiro@example.com',
  picture: {
    thumbnail: 'https://randomuser.me/api/portraits/thumb/women/21.jpg',
  },
},]

renderItem = ({item, index}) => 
<View style={styles.row}>
 <Image style={styles.picture} source={{ uri: item.picture.thumbnail }} />
  <View>
   <Text style={styles.primaryText}>
     {item.name.last + ' ' + item.first}
   </Text>
   <Text style={styles.secondaryText}>{item.email}</Text>
 </View>
</View>

render() {
return(
 <View style ={styles.container}>        
    <Text style = {styles.description}>ok</Text> 
    <FlatList style={{backgroundColor :'#444',
              color : '#fff'}} 
              data={this.sampleData} 
              renderItem={this._renderItem} 
              keyExtractor={(item =>item.email)}/>   
 </View>)
 }
}

const styles = StyleSheet.create({
container : {
  flex : 1,
  alignItems : 'center',
},

row: { 
 flexDirection: 'row', 
 alignItems: 'center', 
 padding: 12 
},

picture: { 
  width: 50, 
  height: 50, 
  borderRadius: 25, 
  marginRight: 18 
},

  primaryText: {
  fontWeight: 'bold',
  fontSize: 14,
  color: 'violet',
  marginBottom: 4,
},

secondaryText: {
  color: 'darkgrey' 
},

container : {
  flex : 1,
  alignItems : 'center',
  backgroundColor :'#666',
  flexDirection : 'column'
},

description: {       
  fontSize: 20,
  color : '#fff',
  textAlign: 'center',
  marginTop: 8,
  marginBottom : 8,
  top : 4
  },

 });

Если это кому-нибудь поможет ...

1 Ответ

0 голосов
/ 26 марта 2019

Вы можете попытаться вернуть значение в renderItem. Пример: 

    renderItem = ({item, index}) => (
     <View style={styles.row}>
       <Image style={styles.picture} source={{ uri: item.picture.thumbnail }} />
       <View>
         <Text style={styles.primaryText}>
         {item.name.last + ' ' + item.first}
         </Text>
       <Text style={styles.secondaryText}>{item.email}</Text>
      </View>
    </View>);

и во Flalist должно быть: 

       <FlatList 
          contentContainerStyle={{backgroundColor :'#444'}} 
          data={this.sampleData} 
          renderItem={this.renderItem} 
          keyExtractor={(item =>item.email)}
       />
...