Question

你好我有一个问题我正在使用反应本机是一个新手，我正在创建一个有一些选项卡的应用程序但我想要的是当我点击每个选项卡作为自己的导航栏。我按照[AppCoda示例] [1]，但我注意到代码库不同于新的代码库反应原生。我的代码是吼叫。记住我正在尝试为每个选项卡创建一个导航栏，我创建了一个文件夹结构，要求每个选项卡，但是当我知道它时，我会得到那个未知模块。只是添加如果我添加在index.os.js中的子文件夹中的相同代码，它的工作原理如下：

    'use strict';

var React = require('react-native');

var SearchButton = require('./app/components/buttons/searchButton');
var CameraButton = require('./app/components/buttons/cameraButton');
var ProfileButton = require('./app/components/buttons/profileButton');
var ContactButton = require('./app/components/buttons/contactButton');



var {
  AppRegistry,
  TabBarIOS,
  NavigatorIOS,
  StyleSheet,
  Text,
  View
} = React;



class AwesomeProject extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
    selectedTab: 'Search'
    };

  }



 render() {

   return (
     <TabBarIOS selectedTab={this.state.selectedTab} barTintColor="darkslateblue">
           <TabBarIOS.Item
               selected={this.state.selectedTab === 'Search'}
               systemIcon="search"
               onPress={() => {
               this.setState({
               selectedTab: 'Search'
               });
           }} style={styles.container} >


      <SearchButton/>
       </TabBarIOS.Item>



         <TabBarIOS.Item systemIcon="bookmarks"
         selected={this.state.selectedTab === 'Camera'}
         icon={{uri:'Camera'}}
         onPress={() => {
         this.setState({
         selectedTab: 'Camera'
         });
       }}>

      <CameraButton/>
       </TabBarIOS.Item>


         <TabBarIOS.Item systemIcon="history"
         selected={this.state.selectedTab === 'Profile'}
         icon={{uri:'Profile'}}
         onPress={() => {
         this.setState({
         selectedTab: 'Profile'
         });
       }}>
      <ProfileButton/>
       </TabBarIOS.Item>

          <TabBarIOS.Item systemIcon="contacts"
         selected={this.state.selectedTab === 'Contacts'}
         icon={{uri:'Contacts'}}
         onPress={() => {
         this.setState({
         selectedTab: 'Contacts'
         });
       }}>
      <ContactButton/>
       </TabBarIOS.Item>


   </TabBarIOS>
);

  }
};

var styles = StyleSheet.create({

  navigator: {
        flex: 1,
       },
  tabContent: {
        flex: 1,
        alignItems: 'center', },
        tabText: {
        color: 'white',
        margin: 50, },

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
marginBottom: 5,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

现在在搜索按钮中，它应该从导航文件夹中获取搜索标题，问题在于其中的未知模块

'use strict'; 

var React = require('react-native');
var searchTitle = require('./app/components/navigation/searchTitle');


var {

StyleSheet,
View,
NavigatorIOS,
Text

} = React


var styles = StyleSheet.create({
navigator: {
flex: 1
}
}
);


class Search extends React.Component{
  render() {

     return (
        <NavigatorIOS
     style={styles.navigator}
    initialRoute={{
      title: 'SomeTitle',
      component: searchTitle
      }}/>

   );


 }

}


module.exports = Search;

有人可以帮助我。

Answer 1

您要求require搜索相对路径。在您的示例中，我看到searchButton位于./app/components/buttons/而searchTitle位于./app/components/navigation/，所以如果您想要searchTitle来自searchButton您需要指定的路径是../navigation/searchTitle。

Answer 2

var back_bg = require（'./../ img / menu.png'）;

模块错误需要未知模块

2 个答案: