React Native 项目结构问题答案

【问题标题】：React Native Project Structure IssueReact Native 项目结构问题
【发布时间】：2020-05-19 23:07:47
【问题描述】：

我刚刚开始使用 react native 和 expo，我一直在一遍又一遍地重组文件夹，因为我遇到了多个错误，其中 js 文件找不到位于 ./asses/navigation/the_image 下的图像.png。我唯一让它工作的时候是在 App.js 中包含所有 js 文件，并且 App.js 位于“./”下，图片位于同一位置。

这是错误的样子：error

这就是我的项目结构：project structure

构建项目的正确方法是什么？如何获取 profile.js 等文件以在资产中查找图像？

messages.js 的代码：

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Image, StyleSheet, TouchableOpacity, View, TextInput } from 'react-native';

export default function messages({ navigation })
{
  const [filtertext, setfilter] = useState('');
  return(
    <View style={styles.home_container}>
      <View style={styles.home_background}>
        <TextInput
          style= {styles.filter} 
          placeholder= "Search"
          placeholderTextColor= "#96a7af"
          onChangeText={filtertext => setfilter(filtertext)}
          defaultValue={filtertext}
        />

        <Image source= {require ('./assets/navigation/3_Elements_Circled_Navigation_Message_On.png')}/> 

        <TouchableOpacity onPress={() =>navigation.navigate('Home')} style={styles.home_button}>        
          <Image source= {require ('./assets/buttons/new_message_icon.png')} style={styles.new_msg_buton}/> 
        </TouchableOpacity>

        <TouchableOpacity onPress={() =>navigation.navigate('Profile')} style={styles.profile_button}>        
          <Image source= {require ('./assets/buttons/profile_icon.png')}/> 
        </TouchableOpacity>

      </View>
    </View>
  );
}

const styles = StyleSheet.create(
{
  new_msg_buton:
  {
    position:'absolute',
    height: 60,
    width: 60,
    top: -696,
    left: 129,
  },

  filter:
  {
    position: 'absolute',
    height: 54,
    width: 275,
    top: -660,
    left: 19,
    paddingLeft: 20,
    borderColor: 'black',
    borderRadius: 23,
    borderTopWidth: 3,
    borderBottomWidth: 3,
    borderLeftWidth: 3,
    borderRightWidth: 3,
  }
})

【问题讨论】：

不要在其他网站上发布图片，直接在此处粘贴代码。不是每个人都会点击当前标签之外的链接。这样也更容易审查和更正
这里也可以直接粘贴图片
从'../assets/navigation/change_to_image_name.png'导入图片； // 应该可以工作
我在帖子中包含了代码。

标签： reactjs react-native expo file-structure

【解决方案1】：

使用./指的是文件所在的当前目录

使用../dir_onelevel_above 指的是dir_onelevel_above，因为您已经在文件夹结构中上一层。

话虽如此，您应该需要../assets/navigation/icon.png 才能从messages.js 访问图像

【讨论】：

如果这个答案对你有用，请点击 ✅ 帮助其他人找到它