Question

我是本机开发的新手。我想在app.js文件中添加构造函数，并且正在使用底部的选项卡导航器组件。由于应用程序容器，我被困在添加构造函数的位置以及它的调用方式。

查询：- -如何在此类内添加构造函数和方法。

我的代码如下（ App.js ）文件。

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, TextInput } from 'react-native';
import { f, auth, database, storage } from './config/config.js';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import feed from './app/screens/feed.js';
import upload from './app/screens/upload.js';
import profile from './app/screens/profile.js';

const MainStack = createBottomTabNavigator (
  {
     Feed: { screen: feed },
     Upload: { screen: upload },
     Profile: { screen: profile }
  }
  );

const App = createAppContainer(MainStack);

export default App;

如果有人对此有想法。请帮我。

提前谢谢！

Answer 1

编辑：

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, TextInput } from 'react-native';
import { f, auth, database, storage } from './config/config.js';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import feed from './app/screens/feed.js';
import upload from './app/screens/upload.js';
import profile from './app/screens/profile.js';

const MainStack = createBottomTabNavigator (
{
  Feed: { screen: feed },
  Upload: { screen: upload },
  Profile: { screen: profile }
}); 

const AppContainer = createAppContainer(MainStack);

export default class App extends React.Component {
  constructor(props){
    super(props)
  }

  render() {
      return <AppContainer/>
  }
}

Answer 2

我们可以使用tab作为主屏幕，将另一个屏幕用作堆栈。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';
import { f, auth, database, storage } from './config/config.js';
import feed from './app/screens/feed.js';
import upload from './app/screens/upload.js';
import profile from './app/screens/profile.js';
import userProfile from './app/screens/userProfile.js';
import comments from './app/screens/comments.js';

const TabStack = createBottomTabNavigator (
    {
      Feed: { screen: feed },
      Upload: { screen: upload },
      Profile: { screen: profile }
    }
  );

const MainStack = createStackNavigator(
    {
      Home: { screen: TabStack },
      User: { screen: userProfile },
      Comments: { screen: comments }
    },
    {
      initalRouteName: 'Home',
      mode: 'modal',
      headerMode: 'none',
    }
  )
const AppContainer  = createAppContainer(MainStack);


export default class App extends React.Component {

  login = async() => {
    //Force user to login
    try{
      let user = await auth.signInWithEmailAndPassword('xyz@test.com', 'XXXXX');
    }catch(error){
      console.log(error);
    }
  }

  constructor(props){
    super(props);
    this.login();
  }
  render() {
    return (
       <AppContainer />
  );
}
}

我希望这对其他人有帮助。谢谢！

如何在react-native版本3 +

2 个答案: