React native React Native在web应用程序中没有问题，但在电话中出现错误

我本打算在这里做个辅导。除了formik，我做了完全相同的事情，但它给了我这个错误。我不明白原因是什么。当我可以运行代码作为网络应用程序，我可以看到没有错误，但当我想运行它在我的a70与二维码

我是个新手。我不明白为什么当我尝试作为web应用程序时，代码运行没有错误，但在手机上出现错误

它说“组件异常文本字符串必须在组件内呈现。”

从“世博会状态栏”导入{StatusBar}；
从“react native”导入{View}；
从'Formik'导入{Formik}；
进口{
样式容器，
内部容器，
PageLogo，
页面标题，
页面文本，
名片盒，
风格化，
StyledLogButton，
样式色域
}来自“/../components/styles”；
常量登录=（）=>{
返回(
T{'\n'}标题
用户名：
通过：
登录
登录
)
};
常量文本输入=（{label，…props}）=>{
返回(
)
}
导出默认登录；

为什么你的代码中到处都是单引号？如果你是说这个`（反勾号），我想这就是样式化组件的语法。哦，好的。除此之外，您确定最后一行中的反勾号是正确的语法吗？导出默认登录```哦，我手动粘贴代码，带有3个反勾号，这些更多。我的意思是这些不包括在代码中。我编辑了。哦。。。我以前犯的错误与您现在犯的错误相同。原因是文字放错了地方。

import { View, Text, Image } from 'react-native';
import Constants from 'expo-constants';


const StatusBarHeight = Constants.statusBarHeight;


export const Colors = {
    background: '#17181A',
    primary: '#15DCA2',
    textcolor: '#ffffff'
};

const { background, primary, textcolor } = Colors;


export const StyledContainer = styled.View` 
    flex: 1;
    padding: 25px;
    padding-top: ${StatusBarHeight + 2}%;
    background-color: ${background};
`;

export const InnerContainer = styled.View`
    flex: 1;
    width: 100%;
    align-items: center;
`;

export const PageLogo = styled.Image`
    width: 115px;
    height: 96px;
`;

export const PageTitle = styled.Text`
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    margin-top: 2%;
    color: ${primary};
`;

export const PageText = styled.Text`
    font-size: 15px;
    font-weight: bold;
    color: ${textcolor};
    padding: 20px;
`;

export const CardBox = styled.View`
    border-radius: 6;
   
    margin-horizontal: 4px;
    margin-vertical: 6px;
    background-color: ${background};
    box-shadow: 0 0 10px rgba(0,0,0,1);
    width: 75%;

`;

export const StyledTextInput = styled.TextInput`
    
   
margin:0px auto; 

border-color: #707070;

    width: 80%;
    text-align:center;
    color: white;
    padding: 5px;
`;

export const StyledLogButton = styled.TouchableOpacity`
  
    
    border:none;
    margin:0;
    padding:20px;
  
    color:${primary};
`;

export const StyledFormArea = styled.View`
width: 96%;
`;

import { StatusBar } from 'expo-status-bar';
import { View } from 'react-native';
import { Formik } from 'formik';

import {
    StyledContainer,
    InnerContainer,
    PageLogo,
    PageTitle,
    PageText,
    CardBox,
    StyledTextInput,
    StyledLogButton,
    StyledFromArea
} from './../components/styles';

const Login = () => {
    return (
        <StyledContainer>
            <StatusBar style="dark" />
            <InnerContainer>
                <PageLogo source={require('./../assets/loginlogo.png')} />
                <PageTitle>T{'\n'}Title</PageTitle>

                <CardBox>
                    <PageText>user name:</PageText>

                    <StyledTextInput></StyledTextInput>

                    <PageText>pass:</PageText>

                      <StyledTextInput></StyledTextInput>

                    <View style={{ flexDirection: "row" }}>
                        <StyledLogButton>Login</StyledLogButton>
                        <StyledLogButton>Login</StyledLogButton>
                    </View>


                </CardBox>
            </InnerContainer>
        </StyledContainer>
    )
};

const textInput = ({ label, ...props }) => {

    return (
        <View>

        </View>
    )

}

export default Login;