Question

是否可以在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
    )
  }
}

谢谢

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

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

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

1 个答案: