我对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中。 此外，我如何从一开始就隐藏按钮?
当前回答
我们现在有钩子，所以我建议重新格式化。使用钩子打开/关闭组件。
const [modalVisible, setModalVisible] = setState(false);
然后有一个按钮
<Button title="Press Me" onPress={() => {
setModalVisible(true);
}}
然后，在return语句中
return(
<View>
{modalVisible &&
Insert modal code in here.
}
</View>
)
其他回答
如果你不想从你的页面中删除组件，比如隐藏一个WebView，我可以保证使用opaque方法。
<WebView
style={{opacity: 0}} // Hide component
source={{uri: 'https://www.google.com/'}}
/>
如果你需要向第三方网站提交表单，这是很有用的。
我会这样做:
var myComponent = React.createComponent({
getInitialState: function () {
return {
showCancel: false,
};
},
toggleCancel: function () {
this.setState({
showCancel: !this.state.showCancel
});
}
_renderCancel: function () {
if (this.state.showCancel) {
return (
<TouchableHighlight
onPress={this.toggleCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
);
} else {
return null;
}
},
render: function () {
return (
<TextInput
onFocus={this.toggleCancel()}
onChangeText={(text) => this.doSearch({input: text})} />
{this._renderCancel()}
);
}
});
我们现在有钩子，所以我建议重新格式化。使用钩子打开/关闭组件。
const [modalVisible, setModalVisible] = setState(false);
然后有一个按钮
<Button title="Press Me" onPress={() => {
setModalVisible(true);
}}
然后，在return语句中
return(
<View>
{modalVisible &&
Insert modal code in here.
}
</View>
)
我通常用这样的东西
const [showComponent, setShowComponent] = useState(false)
return(
<div>
{showComponent && (<Text>Hello</Text>)}
<Button onPress={() => {setShowComponent(true)}}>Click me</Button>
</div>
)
一旦按下按钮，它就会显示“Hello”。这被称为条件渲染。您可以参考w3schools来了解条件呈现。
下面的例子是用Hooks在typescript中编码。
import React, { useState, useEffect } from "react";
........
const App = () => {
const [showScrollView, setShowScrollView] = useState(false);
......
const onPress = () => {
// toggle true or false
setShowScrollView(!showScrollView);
}
......
</MapboxGL.ShapeSource>
<View>{showScrollView ? (<DetailsScrollView />) : null}</View>
</MapboxGL.MapView>
......
}
