代码之家 › 专栏 › 技术社区 › Dhaval Jardosh

createStackNavigator带有Expo和Typescript,不渲染任何内容

expo react-native typescript javascript

Dhaval Jardosh · 技术社区 · 6 年前

更新:

Git Repo of NotWorkingProject

试图使用

react-navigation 用React Native(世博会)包装- 打字稿 )

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

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

AppNavigator。tsx

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);

应用程序。tsx

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 (
    <View style={container}>
      <AppContainer/>
    </View>
  );
}

export default  App;

如有需要:

包裹json

{
  dependencies: {
    expo: "^34.0.1",
    react: "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.11.1"
  },
  devDependencies: {
    "@types/react": "^16.8.23",
    "@types/react-native": "^0.57.65",
    "babel-preset-expo": "^6.0.0",
    typescript: "^3.4.5"
  }
}

请告诉我怎么了。

0 回复 | 直到 6 年前

Rebai Ahmed 6 年前

您需要导入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;

hong developer 6 年前

你不必把设备放在一边。

应用程序。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);

Pozithron 5 年前

以某种方式 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);