Question

我已经分析了我的应用程序的需求，并决定我可以使用网络上的移动友好组件来更有效地开发它，并通过应用程序中的网络视图来展示它。

我需要访问相机和图库的权限（拍摄照片/视频以及上传照片/视频）。

基本上，一个具有Web视图的单屏应用向网站展示了移动友好型组件和上述权限。

这是我当前的app.js：

import React from 'react';
import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer,
} from 'react-navigation';
//import createStackNavigator, createBottomTabNavigator, createAppContainer in our project
import HomeScreen from './pages/HomeScreen';
import { Constants, Location, Camera, Permissions } from 'expo';

const ProfileStack = createStackNavigator(
  {
    //Definition of Navigaton from home screen
    HomeScreen: { screen: HomeScreen },
  },
  {
    //For React Navigation 2.+ change defaultNavigationOptions->navigationOptions
    defaultNavigationOptions: {
      //Header customization of the perticular Screen
      headerStyle: {
        backgroundColor: 'orange',
      },
      headerTintColor: '#FFFFFF',
      title: '',
      //Header title
    },
  }
);

const App = createBottomTabNavigator(
  {
    HomeScreen: { screen: HomeScreen },
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === 'HomeScreen') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        }
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'orange',
      inactiveTintColor: 'gray',
    },
  }
);

export default createAppContainer(App);

和“ ./pages/HomeScreen”：

//This is an example code for Bottom Navigation//
import React, {Component} from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet, WebView } from 'react-native';
//import all the basic component we have used

export default class ProfileScreen extends React.Component {
  //Profile Screen to show from Open profile button
  render() {
    return (
      <WebView
        source={{uri: 'https://mobilesite'}}
        style={{marginTop: 20}}
      />
    );
  }
}

到目前为止，该站点可以按预期在单个屏幕上打开，但是底部有一个导航栏。我还希望尽可能地隐藏顶部栏，因为我也在移动网站上的移动友好标题中说明了这一点。

此外，通过移动网络代码库，我正在利用<input type="file" />进行上传。这与React Native Permissions兼容吗？

Answer 1

您正在使用createBottomTabNavigator()，并将结果导航器传递到createAppContainer()，这将创建一个底部标签导航器。

如果将StackNavigator（通过createStackNavigator()使用的ProfileStack）传递给createAppContainer()，它将渲染堆栈，而不是您想要的底部标签导航器

要完全删除标头，可以在headerMode: 'none'参数中使用navigationOptions。

您可以在React Navigation docs中看到想要的基本版本（没有标题）。

没有底部导航栏的单屏应用程序

1 个答案: