React Native 在 App.js 渲染中调用另一个 .js答案

【问题标题】：React Native calling another .js inside App.js renderReact Native 在 App.js 渲染中调用另一个 .js
【发布时间】：2018-08-02 18:45:35
【问题描述】：

是否可以在我的 App.js 渲染中调用另一个 render()。我刚开始使用 react native，所以它可能看起来很愚蠢。

我创建以下文件。 Splash.js

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default class Splash extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}></Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontWeight: 'bold',
    fontSize: 18
  }
})

如何在我的 App.js 中调用它作为默认页面？

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      // Call the Splash.js
    )
  }
}

谢谢

【问题讨论】：

标签： react-native

【解决方案1】：

无需在 render() 函数中调用 render()。你可以将你的启动组件转换成一个函数式组件，它只返回 JSX：

import React from 'react';
import {View, Text} from 'react-native';

export default function Splash() {
    return (
      <View>
        <Text>Splash</Text>
      </View>
    );
}

然后，您的应用组件将呈现返回的 JSX，如下所示：

import React from 'react'
import Splash from './your-path-to-the-splash-file'

export default class App extends React.Component {
    render() {
        return (
            <View>
                <Splash/>
            </View>
        );
    }
};

你应该查看官方的 react 文档：https://reactjs.org/docs/components-and-props.html

【讨论】：