代码之家 › 专栏 › 技术社区 › Max Boy

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

react-native

Max Boy · 技术社区 · 6 年前

是否可以在我的App.js render中调用另一个render()。我刚开始和react native合作,所以看起来很愚蠢。

我创建以下文件。飞溅.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
    )
  }
}

谢谢

1 回复 | 直到 6 年前

D. Phi 6 年前

不需要在render()函数中调用render()。您可以将splash组件转换为函数组件,它只返回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

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前