在react native中启用基于某些条件的道具？
在React Native中，可以通过条件渲染来启用基于某些条件的道具。条件渲染是根据特定条件来决定是否渲染或显示某个组件或道具。
一种常见的条件渲染方式是使用三元表达式。可以根据条件来决定是否传递某个道具或设置不同的道具值。例如：
import React from 'react';
import { View, Text } from 'react-native';
const MyComponent = ({ showProp }) => {
return (
<View>
{showProp ? <Text>This is a conditional prop</Text> : null}
</View>
);
};
export default MyComponent;在上面的例子中，根据showProp的值来决定是否渲染Text组件。如果showProp为true，则显示"This is a conditional prop"文本，否则不显示。
除了三元表达式，还可以使用逻辑与（&&）运算符来进行条件渲染。例如：
import React from 'react';
import { View, Text } from 'react-native';
const MyComponent = ({ showProp }) => {
return (
<View>
{showProp && <Text>This is a conditional prop</Text>}
</View>
);
};
export default MyComponent;在这个例子中，如果showProp为true，则渲染Text组件，否则不渲染。
这种条件渲染的方式可以根据具体的需求和条件来灵活地控制组件的渲染和道具的传递。
关于React Native的更多信息和使用方法，可以参考腾讯云的React Native产品文档：React Native产品介绍。
相关·内容
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
3回答
我试图在React本机中编写一个可重用的标头组件。我想以这样的方式编写它，即左、右按钮可以作为子组件传递。要知道在哪里渲染哪个按钮，我想传递一个道具，比如rightIcon或leftIcon。然而，我不知道如何获得这些道具。
这是我的App.js文件
import React from 'react';
import {StyleSheet, TouchableHighlight, View} from 'react-native';
import Header from "./src/Header";
import {Ionicons} fro
浏览 1提问于2018-02-07得票数 6
回答已采纳
屏幕之间的堆栈导航问题。我正在“SveKategorije”屏幕上显示数据。它基本上是分类按钮，当我点击按钮时，我现在只想显示另一个屏幕，但由于某种原因，它不能工作。当我输入onPress={() => this.props.navigation.navigate(‘error’)}时，它会给出我正在使用的error (react-native - 0.57.7) 下面是router.js代码(我在其中声明了我的路由) import React from 'react';
import { View, Text, Button } from "react-n
浏览 24提问于2019-02-06得票数 1
回答已采纳
我正在尝试在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
回答已采纳
1回答
我正在处理react本机/ redux，并分发一个应该显示数字的操作，但会抛出一个错误：
未处理的JS异常:对象作为React子对象无效(找到:键为{type，有效载荷}的对象)。如果您打算呈现一个子集合，则使用数组代替，或者使用createFragment( object )从React插件包装对象。检查Text的呈现方法。
createStore.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import createLogger from 'redux-l
浏览 3提问于2017-03-23得票数 0
回答已采纳
1回答
我使用compose在组件中执行多个查询。我希望能够为查询使用变量。
1)如何在查询中包含变量？
2)如何执行查询？
以下是构成部分：
import React from 'react'
import {
View,
} from 'react-native'
import { graphql, withApollo } from 'react-apollo'
import { compose } from "recompose";
import { GET_ITEM, GET_REVIEWS } from '.
浏览 0提问于2019-10-23得票数 0
回答已采纳
我正在使用expo在react原生平台中做这件事。
我想显示list of items ( ListItems.js) All_Employees_screen.js。这些项目是通过一个功能组件呈现的，我希望有一个onRowPress()处理程序，以便在单击它时可以将其导航到另一个视图，但我不知道如何在react导航上做到这一点？
或者，由于新的功能组件可以是类组件(这样会更好)，我如何访问它内部的导航内容？
AllProperties.js
import _ from 'lodash';
import React, {
Component
} from '
浏览 2提问于2017-07-11得票数 4
我买了一个关于Udemy的反应本土化课程，教React的人使用了{...this.props}。但这对我没用。这是错误消息。
TypeError:未定义不是对象(计算'_this.props')
我该怎么办？
LoginForm.js
import React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import Input from '../components/Input';
const
浏览 6提问于2020-03-04得票数 1
回答已采纳
我已经掌握了React，但我今天第一次开始了一个React-Native项目。我的代码目前非常简单，但我似乎无法让它工作。我得到以下错误：
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.%s,
in RCTView (at View.j
浏览 46提问于2019-08-16得票数 1
回答已采纳
我刚开始学习React Native，我想要构建一个界面美观的ReactNaive应用程序，我如何构建一个组件，并将style{backgroundColor}作为道具，然后在家庭中呈现该组件
home.js
import React from 'react'
import { View, Text , Image , ScrollView} from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import {
浏览 5提问于2021-12-22得票数 0
回答已采纳
我想在单击MainMenu.js文件中的按钮后导航到List.js，但它总是显示以下错误： TypeError: undefined is not an object (evaluating 'navigation.push') 这是我的App.js文件 import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
impo
浏览 34提问于2021-07-28得票数 0
回答已采纳
我想在类组件中使用navigation，它不是屏幕组件，也不会通过props自动访问navigation，所以我必须将导航作为props传递给它。但是父组件是一个功能组件，我在其中使用了navigation挂钩。但是，如何在子组件中使用navigation？
ParentComponent.js
import React from 'react';
import {View , TouchableOpacity} from 'react-native';
import {useNavigation} from 'react-navigation-hook
浏览 2提问于2020-07-24得票数 0
回答已采纳
在从屏幕页访问此自定义组件时出现问题。我敢肯定这个办法是直接的
构成部分：
import React from 'react';
import { Text, View, Button } from 'react-native';
class Ohno extends React.Component {
render(){
return(
<Text>Test</Text>
)
}
}
export default Ohno
Screen:
import{ React, Co
浏览 1提问于2021-12-25得票数 0
回答已采纳
开始我的第一个rn学习项目，并停留在其他地方。基本上，在用户登录后，我希望在顶部显示一个文本。 IDComponent.js import React from 'react';
import { Text } from 'react-native';
const IDComponent = () => {
//generate the ID
const id = generateId();
return (<View><Text>{id}</Text></View>);
};
export
浏览 10提问于2020-09-27得票数 0
我使用这个<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>来打开其他页面，但是当我点击照片页面中的<TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>时，我得到了这个错误：
代码：
import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity,
浏览 1提问于2021-07-08得票数 0
我试图在类型记录中创建一个带有可选道具和defaultProps的无状态React组件(用于)。这对于普通的JS来说是微不足道的，但我很难理解如何在TypeScript中实现它。
使用以下代码：
import React, { Component } from 'react';
import { Text } from 'react-native';
interface TestProps {
title?: string,
name?: string
}
const defaultProps: TestProps = {
title
浏览 3提问于2016-10-24得票数 121
回答已采纳
2回答
我是react原生的新手。我已经使用了Wix react-native导航库来在页面之间导航。我想为导航编写一个单独的类，比如bellow，并在我的项目中需要它的任何地方调用它。但是我得到了"this.props.componentId“的错误。下面是我的导航函数： ScreenNavigation.js import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";
class ScreenNavigation extends Co
浏览 11提问于2019-01-23得票数 0
我试图构建一个应用程序，其中包含4个按钮，其中每个按钮将导致一个新的屏幕，但每当我试图点击任何按钮，它显示undefined is not an object (evaluating '_this2.props.navigation.navigate') onPress Buttons.js:21:57。当我单击flood按钮时，它应该导航到洪流页面，其中只显示文本flood。我是新的反应本机，任何想要写干净和模块化的代码。什么应该是一个很好的目录结构？
目录结构- 错误-
APP.js
import { Text, View, StyleSheet, StatusBar}
浏览 0提问于2019-05-04得票数 0
回答已采纳
我正在尝试创建一个带有react本机的todolist，但是我得到了这个错误:当我按下按钮添加一个新的项目列表时就会发生这种情况。
这是我的密码：
App.js
import React, {useState} from 'react';
import {
View,
Text,
Button, FlatList, StyleSheet
} from 'react-native';
import AddtodoInput from "../components/addToDoInput";
function Ite
浏览 3提问于2020-07-07得票数 0
回答已采纳
/这是主屏幕，在这里我尝试转到“组件”。它不能识别'props.navigation.navigate
import React from 'react';
import { Text, StyleSheet, View, Button, TouchableOpacity } from 'react-native';
const HomeScreen = props => {
return (
<View>
<Text style={styles.text}>Hi there !</Text&
浏览 2提问于2019-09-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
