使用react-native-login-screen包报错：文本需在<Text>组件中渲染

直接报错原因：JSX中存在未包裹的文本节点 #

你的代码里，<LoginScreen>组件闭合后，<View>内部多了一个单独的;，这个分号会被React识别为文本节点，而React Native要求所有文本必须包裹在<Text>组件内，这就是触发“Text strings must be rendered within a component”错误的核心原因。

额外需要修正的JS语法问题 #

你使用的是JavaScript，但代码里添加了TypeScript的类型标注（比如(email: string)），这在JS环境中属于语法错误，需要移除这些类型声明。

修正后的代码 #

import React from "react";
import { StyleSheet, View } from "react-native";
import LoginScreen, { SocialButton } from "react-native-login-screen";
import { Logo, Facebook, Twitter } from "./imgs";

const HomeScreen = (props) => {
  return (
    <View>
      <LoginScreen
        logoImageSource={Logo}
        onLoginPress={() => {}}
        onSignupPress={() => {}}
        onEmailChange={(email) => {}}
        onPasswordChange={(password) => {}}
      >
        <SocialButton text="Continue with Google" onPress={() => {}} />
        <SocialButton
          text="Continue with Facebook"
          imageSource={Facebook}
          onPress={() => {}}
        />
        <SocialButton
          text="Continue with Twitter"
          imageSource={Twitter}
          onPress={() => {}}
        />
      </LoginScreen>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
  },
});

export default HomeScreen;

内容的提问来源于stack exchange，提问作者FattyDev1