如何在React Native中呈现<Text> JSX标签中的字符串变量
在React Native中，要呈现<Text> JSX标签中的字符串变量，可以使用花括号{}将变量包裹起来，并将其作为<Text>组件的子元素。以下是一个示例：
import React from 'react';
import { Text } from 'react-native';
const MyComponent = () => {
const myString = 'Hello World';
return (
<Text>{myString}</Text>
);
};
export default MyComponent;在上面的示例中，我们定义了一个名为myString的字符串变量，并将其包裹在<Text>组件中。当组件渲染时，myString的值将被显示在屏幕上。
React Native中的<Text>组件用于呈现文本内容，并支持基本的样式和布局。您可以根据需要对<Text>组件进行样式设置，例如设置字体大小、颜色、对齐方式等。
React Native是一个用于构建跨平台移动应用的框架，它允许开发人员使用JavaScript编写应用程序，并在iOS和Android平台上运行。React Native提供了一套丰富的组件和API，使开发人员能够构建出精美、高性能的移动应用。
腾讯云提供了一系列与云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。您可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的信息和产品介绍。
相关·内容
我使用我们自己的库来进行API调用。在devDependencies中，我指定了该库。如果我运行npm install，我将获得node_modules下的库。在应用程序方面，它工作得很好。
当我尝试使用JEST时，我得到了意想不到的标记。
请在下面找到我的package.json，
{
"name": "myApp",
"version": "0.28.9",
"description": "My APP",
"main"
浏览 1提问于2019-01-10得票数 0
错误：
“元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: undefined.You可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查App的render方法。“
index.js
import { registerRootComponent } from 'expo';
import App from './App';
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
浏览 1提问于2021-04-01得票数 0
3回答
通过函数调用组件
、、
我正在开发一个component，以便在npm中发布它，但是我想使用method而不是标记来调用组件。
示例：
myComponent.js
import React from 'react'
import { View, Text } from 'react-native'
export const showComponent = () => {
// this would be the function that I user to call my component down
}
const myComponent = (props) =
浏览 0提问于2019-05-09得票数 1
我正在开发一个react原生应用程序。我的项目中有一堆本地的SVG文件。我想使用我的自定义组件来渲染文本和SVG图像。 下面是我的自定义组件，用于呈现静态SVG文件的Text和Image： import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
export default MyComponent = ({svgFile, text}) => {
return (<View style={styles.line}>
浏览 146提问于2020-07-25得票数 0
场景：我在屏幕上呈现了svg circle和state。我还有两个按钮。Change Size按钮将圆圈的大小(共享值)从50更改为100或从100更改为50。“更改状态”按钮将状态从“苹果”更改为“橙色”或“橙色”更改为“苹果”。备注：动画不以任何方式使用状态。我也是控制台，在每个重发器中记录size.value。
pressed ：一旦按下Change Size按钮，它就会将圆圈从50动画到100。现在，如果按Change State按钮，它会改变状态，但它也会使圆圈的大小返回到50，尽管我们的日志显示共享值size.value仍然是100。
预期行为：期望圆圈的大小保持为100，因为这
浏览 3提问于2021-07-04得票数 0
回答已采纳
刚开始学习反应-本土化，
我创建了一个单独的文件flexdemo.js，并创建了如下组件：
import React, { Component } from 'react';
import { View } from 'react-native';
export default class FlexibleViews extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<View s
浏览 11提问于2017-10-06得票数 42
回答已采纳
我正在开发一个移动反应原生博览会应用程序。我正在使用BottomTabNavigator (NavigationContainer)。顾名思义，它应该出现在底部，但它错误地出现在顶部。
我已经在屏幕顶部有了另一个图像(logo.png)，导航栏(或NavigationContainer)也在图像的顶部并重叠。请帮我解决这个问题。请看下面的代码：
在下面的代码中，MyTabs是从createBottomTabNavigator()创建的导航器。这不正确地显示在屏幕顶部。
import React from 'react';
import { Image, StyleSheet,
浏览 12提问于2021-02-21得票数 0
回答已采纳
我正在尝试在react原生中创建一个组件。
该组件的示例如下：
import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image } from 'react-native'
const MyComponent = ({Text, Image}) => {
return (
<Text>{Text}</Text>
<Image source={require('../..
浏览 10提问于2019-11-26得票数 0
回答已采纳
3回答
我写了一个有趣的酶测试如下：
import React from 'react';
import ManageDrugTermPage from '../js/manageDrugTermPage.jsx';
import toJson from 'enzyme-to-json';
describe('manage drug term page test suite', () => {
it('snapshot test', () => {
const setRouteLeaveHook =
浏览 1提问于2017-05-17得票数 6
回答已采纳
当运行"npm测试“时，我得到以下信息：
不变违反:无法在“连接(AddTodo)”上下文中找到“存储”。或者将根组件包装在连接选项中，或者将自定义的React提供程序和相应的React使用者(AddTodo)传递给连接选项。
我确信它来自组件/addTodo.js内部的行：
export default connect()(AddTodo);
但是，我不确定应该修改什么才能使测试在不破坏应用程序的情况下成功运行。
这是一个失败的测试，它在App.test.js中：
import React from 'react';
import ReactDOM from
浏览 3提问于2020-01-01得票数 0
回答已采纳
我目前正在构建一个组件，其中包含一个捕获名为userInput的值的<TextInput。我有一个<TouchableOpacity>，然后它调用一个在组件外部声明的函数，但是这个特定的函数接受userInput作为它的一个参数。 我正在努力弄清楚如何在组件的状态下使用赋给userInput的值，并将其传递给myFunction。这是可能的和/或有更好的方法来实现这一点吗？ 我确实尝试将函数移动到组件内部，但是这导致了函数错误。 任何帮助都将不胜感激。 import React, {Component} from 'react';
import {Text,
浏览 11提问于2020-07-07得票数 0
我正在尝试用React组件替换字符串，但它不起作用。它正在返回[object Object]。 我尝试使用react-dom/server中的renderToString和renderToStaticMarkup来呈现组件，但没有成功。 import React from 'react';
const MyComponent = ({ children }) => <strong>{children}</strong>;
function App() {
const content = 'Hi @user'.replace
浏览 61提问于2019-09-06得票数 0
import React from 'react'
import PropTypes from 'prop-types'
const Todo = ( {onClick, completed, text} ) =>(
<li
onClick ={onClick}
style = {{
textDecoration: completed ? 'line-through' : 'none'
}}
>
{ text }
</li>
浏览 4提问于2020-02-12得票数 0
回答已采纳
我使用摩卡，酶，chai和一些模拟库使测试成为可能。因此，TestComponent.js的内容如下，我配置存储并将其传递给提供者，而DeskScreen是连接组件：
import mockery from "mockery";
import 'babel-polyfill';
import reactNativeSvgMock from "react-native-svg-mock";
mockery.enable();
mockery.registerMock("react-native-svg", reactNativeSv
浏览 3提问于2017-01-14得票数 0
1回答
我正在尝试构建一个响应性的标头组件。在桌面上使用display:inline-block显示所有导航链接，在移动时使用display:block显示所有导航链接。
注意:我使用react-responsive进行媒体查询，因此：
import Responsive from 'react-responsive';
function Mobile(props) {
return(<Responsive {...props} maxWidth={800}/>);
}
function Desktop(props) {
return(<Responsiv
浏览 0提问于2019-02-05得票数 1
回答已采纳
2回答
我试图创建一个自定义按钮使用视图和无线电组，但不能重叠在另一个。基本上，我要创造这样的东西：
我确实检查了反应纸，但还是没有运气。
import * as React from 'react';
import { View } from 'react-native';
import { RadioButton, Text } from 'react-native-paper';
const MyComponent = () => {
const [value, setValue] = React.useState(
浏览 4提问于2021-02-26得票数 1
回答已采纳
4回答
我是本地新手。我想要做的是将添加到我的登录页面，用户可以单击一个按钮并导航到注册页面，但是我得到了一个错误Cannot read property 'navigate' of Undefined。我已经在网上搜索过解决方案了，但没有运气。这对我没有帮助-- 和其他人也一样。
这是我的密码
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
浏览 8提问于2017-06-01得票数 4
回答已采纳
1回答
我目前正在学习酶的单元测试。
似乎有一种奇怪的行为:酶似乎随机不识别某些成分。让我举几个例子：
下面是我的SafeContainer组件：
import React from "react";
import { SafeAreaView } from "react-native";
import { PropTypes } from "prop-types";
import styles from "./styles";
const SafeContainer = ({ children }) => {
return
浏览 1提问于2018-07-08得票数 3
回答已采纳
1回答
在开始使用React导航文档时，他们说：
注释:组件支柱接受组件，而不是呈现函数。不要传递内联函数(例如component={() => })，否则当父组件重新呈现时，组件将卸载和重新装入，丢失所有状态。请参阅传递其他道具以获得其他选项。
根据我的理解，如果我写：
const WrappedHome = () => <HomeScreen />;
然后稍后使用以下内容：
<Stack.Screen name='home' component={WrappedHome} />
这将相当于他们的榜样。React或JSX或React本机是否做了一
浏览 4提问于2020-12-03得票数 1
回答已采纳
下面是反模式的反应吗？
由于某些原因，变量和函数可以在React函数组件之外声明。例如，计时器ID和其他可以使用如下：
import React from "react";
const myFunc = () => { // no purpose
/*some codes*/
}
let myBool = false; // no purpose
let timerId = 0;
const MyComponent = () => {
const [name, setName] = useState("");
浏览 6提问于2021-08-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
