Блог

Я новичок в react native, поэтому извините меня, если это глупый вопрос, но я следую руководству и редактирую свой App.js , и я в тот момент, когда делаю tempData.js файл, я его тоже закодировал, отображает заголовок списка, который записан в TempData для отображения на экране, но онне работает, я не знаю, связана ли проблема с тем, как я написал свой код или формат и т. Д., Код ошибки находится в конце вопроса

App.js Код —

 import { StatusBar } from 'expo-status-bar';
import React from 'react';{ StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Flastlist,
  FlatList,
  } from 'react-native';
import {AntDesign} from '@expo/vector-icons';
import tempData from './tempData';
 

экспорт приложения класса по умолчанию расширяет React.Компонент {
render() {

 return (
  <View style={styles.container}>
    <View style={{flexDirection: "row"}}>

      <View style={styles.divider} />
      <Text style={styles.title}>
        ToDo <Text style={{fontWeight: "300", color: '#24A6D9'}}>Lists</Text>
      </Text>
      <View style={styles.divider} />
    </View>

    <View style={{marginVertical: 48}}>
      <TouchableOpacity style={styles.addList}>
        <AntDesign name="plus" size={16} color={'#24A6D9'} />
      </TouchableOpacity>

      <Text style={styles.add}>Add List</Text>
    </View>

    <View style={{height: 275, paddingLeft: 32}}>
      <FlatList
        data={tempData}
        keyExtractor={item => item.name}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        renderItem={({ item }) => (
          <View>
            <Text>{item.name}</Text>
          </View>

        )}

      />

    </View>
  </View>
);

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  divider: {
    backgroundColor: '#A7CBD9',
    height: 1,
    flex: 1,
    alignSelf: 'center',
  },
  title: {
    fontSize: 38,
    fontWeight: "800",
    color: '#2D3436',
    paddingHorizontal: 40,
  },
  addList: {
    borderWidth: 2,
    borderColor: '#A7CBD9',
    borderRadius: 4,
    padding: 16,
    alignItems: "center",
    justifyContent: "center",
  },
  add: {
    color: '#24A6D9',
    fontWeight: "600",
    fontSize: 14,
    marginTop: 8,
  },

});
 

tempData.js код-

 export default tempData = [

{
    name: "Plan A Trip",
    color: "#24A6D9",
    todos: [

        {
            title: "Book Flight",
            completed: false
        },
        {
            title: "Passport Check",
            completed: false
        },
        {
            title: "Hotel Room Check",
            completed: true
        },
        {
            title: "Pack Luggage",
            completed: true
        }
    ]
},
{
    name: "Shopping List",
    color: "#8022D9",
    todos: [
        {
            title: "Buy Milk",
            complete: false
        },
        {
            title: "Buy Chocolate",
            completed: true
        }
    ]
},
{
    name: "School Work",
    color: "#A7CBD9",
    todos: [
        {
            title: "Geography 12 marker",
            completed: false
        }
    ]
}
 

]

Ошибка при сохранении в tempData.js использование expo — это «Не могу найти переменную: TempData» и отсутствие ошибок при запуске App.js но он предназначен для отображения имен списков на главном экране

Вы не должны использовать export default tempData = [] вместо этого вы можете использовать

 let tempData; export default tempData = [];
 

это

 export default []
 

или

    const variable = [];
   export default variable;
 

При default экспорте вам вообще не нужно называть variable ;
Если вы хотите использовать export , вы можете в основном использовать

1.  const variable = [];
   const variable1 = [];
   export variable
   export {variable as newNameForVariable};
    

2.  const variable = [];
   const variable1 = [];
   const exportable = {variable,variable1};
   export * from exportable;
    

вы можете попробовать export const tempData , как показано ниже:

 export const tempData = [
  {
    name: 'Plan A Trip',
    color: '#24A6D9',
    todos: [
      {
        title: 'Book Flight',
        completed: false
      },
      {
        title: 'Passport Check',
        completed: false
      },
      {
        title: 'Hotel Room Check',
        completed: true
      },
      {
        title: 'Pack Luggage',
        completed: true
      }
    ]
  },
  {
    name: 'Shopping List',
    color: '#8022D9',
    todos: [
      {
        title: 'Buy Milk',
        complete: false
      },
      {
        title: 'Buy Chocolate',
        completed: true
      }
    ]
  },
  {
    name: 'School Work',
    color: '#A7CBD9',
    todos: [
      {
        title: 'Geography 12 marker',
        completed: false
      }
    ]
  }
]