我对React Native真的很陌生，我想知道如何隐藏/显示组件。 下面是我的测试用例:
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input: text})} />
<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
我有一个TextInput组件，我想要的是在输入得到焦点时显示TouchableHighlight，然后在用户按下取消按钮时隐藏TouchableHighlight。
我不知道如何“访问”TouchableHighlight组件，以便隐藏/显示它在我的函数showCancel/ hideccancel中。 此外，我如何从一开始就隐藏按钮?
当前回答
如果你需要组件保持加载但隐藏，你可以将不透明度设置为0。(例如，我需要这个世博会相机)
//in constructor
this.state = {opacity: 100}
/in component
style = {{opacity: this.state.opacity}}
//when you want to hide
this.setState({opacity: 0})
其他回答
在react或react native中，组件隐藏/显示或添加/删除的方式不像android或iOS中那样工作。我们大多数人都认为会有类似的策略
View.hide = true or parentView.addSubView(childView)
但反应的方式是完全不同的。实现这种功能的唯一方法是将组件包含在DOM中或从DOM中删除。
在这个例子中，我将根据单击按钮来设置文本视图的可见性。
这个任务背后的想法是创建一个名为state的状态变量，在按钮单击事件发生时将初始值设置为false，然后它的值切换。现在我们将在创建组件时使用这个状态变量。
import renderIf from './renderIf'
class FetchSample extends Component {
constructor(){
super();
this.state ={
status:false
}
}
toggleStatus(){
this.setState({
status:!this.state.status
});
console.log('toggle button handler: '+ this.state.status);
}
render() {
return (
<View style={styles.container}>
{renderIf(this.state.status)(
<Text style={styles.welcome}>
I am dynamic text View
</Text>
)}
<TouchableHighlight onPress={()=>this.toggleStatus()}>
<Text>
touchme
</Text>
</TouchableHighlight>
</View>
);
}
}
在这段代码中唯一需要注意的是renderIf，它实际上是一个函数，它将根据传递给它的布尔值返回传递给它的组件。
renderIf(predicate)(element)
renderif.js
'use strict';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;
在你的渲染函数中:
{ this.state.showTheThing &&
<TextInput/>
}
然后就这样做:
this.setState({showTheThing: true}) // to show it
this.setState({showTheThing: false}) // to hide it
你可以使用useState Hook来实现
The useState basically, is a feature which helps us preserve the values of variables even after multiple re-renders.
它充当本地状态管理工具，用于在组件呈现或重新呈现后存储值。
除此之外，你还可以通过改变状态变量的值来触发它来更新UI。
const [show,setShow] = useState(true)
这里我们解构了useState发送的值，第一个是变量，通过它我们可以得到值，第二个是一个函数，通过它我们可以更新状态变量的值。
所以，在你的情况下-
import React, {useState} from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import Constants from 'expo-constants';
export default function App() {
const [show,setShow] = useState(true)
return (
<View style={styles.container}>
{show && <Text style={styles.paragraph}>
Showing and Hiding using useState
</Text>}
<Button
title="Press me"
onPress={() => {setShow(!show)}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
在本例中，在Button press上，我们将状态变量从true切换为false。
您可以使用布尔条件显示或隐藏JSX Code，我们在这条语句中就是这样做的。
{show && <Text style={styles.paragraph}>
Showing and Hiding using useState
</Text>}
这是一种将状态用于UI操作的快速而有效的方法。
如果你不想从你的页面中删除组件，比如隐藏一个WebView，我可以保证使用opaque方法。
<WebView
style={{opacity: 0}} // Hide component
source={{uri: 'https://www.google.com/'}}
/>
如果你需要向第三方网站提交表单，这是很有用的。
我们现在有钩子，所以我建议重新格式化。使用钩子打开/关闭组件。
const [modalVisible, setModalVisible] = setState(false);
然后有一个按钮
<Button title="Press Me" onPress={() => {
setModalVisible(true);
}}
然后，在return语句中
return(
<View>
{modalVisible &&
Insert modal code in here.
}
</View>
)
