具有Expo和Typescript的createStackNavigator,不呈现任何内容

时间:2019-08-10 08:35:31

标签: javascript typescript react-native expo

更新:

Git Repo of NotWorkingProject


尝试使用

React Native(Expo- Typescript

中的

DropdownMenuItem软件包

与常规React Native(Expo-Vanilla JS)相同的方式

但是它不会在屏幕上呈现任何内容。


AppNavigator.tsx

_kMenuItemHeight

App.tsx

react-navigation

需要时增加:

package.json

import {createAppContainer, createStackNavigator} from 'react-navigation';
import * as React from 'react';
import {StyleSheet, View, Text} from 'react-native';

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f',
        flex: 1
    }
});

const HomeScreen = () => (
    <View style={styles.container}>
        <View>
            <Text>PLEASE PLEASE PLEASE RENDER THIS</Text>
        </View>
    </View>
);

HomeScreen.navigationOptions = {
    title: 'Home'
};

const AppNavigator = createStackNavigator({Home: HomeScreen});

export default createAppContainer(AppNavigator);

请让我知道怎么了。

3 个答案:

答案 0 :(得分:1)

您不必将设备放在一边。

我创建的

App.tsx Example

import {createAppContainer, createStackNavigator} from 'react-navigation';
import * as React from 'react';
import {StyleSheet, View, Text} from 'react-native';

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f',
        flex: 1,
        justifyContent:"center",
        alignItems:"center"
    }
});

const HomeScreen = () => (
    <View style={styles.container}>
        <View>
            <Text>PLEASE PLEASE PLEASE RENDER THIS</Text>
        </View>
    </View>
);

HomeScreen.navigationOptions = {
    title: 'Home'
};

const AppNavigator = createStackNavigator({Home: HomeScreen});

export default createAppContainer(AppNavigator);

答案 1 :(得分:1)

您需要导入AppContainer

import AppNavigator from "./config/router";



    import React from 'react';
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import AppContainer from './navigation/AppNavigator'

const styles = {
  container: {
    flex: 1,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  } as ViewStyle
};


const App = (style:Object): {} => {
  const { container } = styles;
  return (

      <AppContainer/>

  );
}
export default  App;

答案 2 :(得分:0)

不知何故,View组件阻止了应用容器和您的组件的视图。尝试使用这种方式,它对我有用:

    ....
    ....
    const HomeScrconst HomeScreen = () => (
        <>
          <Text>PLEASE PLEASE PLEASE RENDER THIS</Text>
        </>
    );

    HomeScreen.navigationOptions = {
        title: 'Home'
    };

    const AppNavigator = createStackNavigator({Home: HomeScreen});

    export default createAppContainer(AppNavigator);een = () => (
        <>
          <Text>PLEASE PLEASE PLEASE RENDER THIS</Text>
        </>
    );

    HomeScreen.navigationOptions = {
        title: 'Home'
    };

    const AppNavigator = createStackNavigator({Home: HomeScreen});

    export default createAppContainer(AppNavigator);