反応ネイティブでコンポーネントを非表示/表示
私は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/hideCancelの中に隠したり表示したりするために「アクセス」する方法を知りません。
また、ボタンを最初から隠すにはどうすればよいですか。
私はこのようなことをするだろう：
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()}
);
}
});
あなたのレンダリング機能では：
{ this.state.showTheThing &&
<TextInput/>
}
それからちょうどしなさい：
this.setState({showTheThing: true}) // to show it
this.setState({showTheThing: false}) // to hide it
コンポーネントの非表示/表示または追加/削除の方法で反応またはネイティブに反応することは、AndroidまたはiOSの場合のようには機能しません。私たちのほとんどは、同じような戦略があると思います
View.hide = true or parentView.addSubView(childView)
しかし、ネイティブワークに反応する方法はまったく異なります。この種の機能を実現する唯一の方法は、コンポーネントをDOMに含めるか、DOMから削除することです。
この例では、ボタンクリックに基づいてテキストビューの表示/非表示を設定します。
このタスクの背後にある考え方は、button clickイベントが発生したときに初期値をfalseに設定してから値を切り替えるというstateという状態変数を作成することです。今度は、コンポーネントの作成中にこの状態変数を使用します。
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;
render（）では、条件付きでJSXを表示することも、次のようにnullを返すこともできます。
render(){
return({yourCondition ? <yourComponent /> : null});
}
2つの画像を切り替える必要がありました。それらの間の条件付き切り替えでは、画像が表示されずに５秒の遅延があった。
私は下落したamosの答えからアプローチを使っています。適切なフォーマットでコードをコメントに入れるのは難しいため、新しい回答として投稿してください。
レンダリング機能：
<View style={styles.logoWrapper}>
<Image
style={[styles.logo, loading ? styles.hidden : {}]}
source={require('./logo.png')} />
<Image
style={[styles.logo, loading ? {} : styles.hidden]}
source={require('./logo_spin.gif')} />
</View>
スタイル：
var styles = StyleSheet.create({
logo: {
width: 200,
height: 200,
},
hidden: {
width: 0,
height: 0,
},
});
ほとんどの場合、私はこのようなことをしています。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {isHidden: false};
this.onPress = this.onPress.bind(this);
}
onPress() {
this.setState({isHidden: !this.state.isHidden})
}
render() {
return (
<View style={styles.myStyle}>
{this.state.isHidden ? <ToHideAndShowComponent/> : null}
<Button title={this.state.isHidden ? "SHOW" : "HIDE"} onPress={this.onPress} />
</View>
);
}
}
もしあなたがプログラミングに不慣れなら、この行はあなたにとって奇妙なものでなければなりません。
{this.state.isHidden ? <ToHideAndShowComponent/> : null}
この行は
if (this.state.isHidden)
{
return ( <ToHideAndShowComponent/> );
}
else
{
return null;
}
しかし、JSXコンテンツにif/else条件（たとえば、render関数のreturn（）部分）を記述することはできませんので、この表記法を使用する必要があります。
この小さなトリックは多くの場合非常に役に立つことがあります、そして、あなたはすぐに条件をチェックすることができるので私はあなたがあなたの開発でそれを使うことを勧めます。
よろしく、
非表示AndActivity Indicatorの親ビューを表示
constructor(props) {
super(props)
this.state = {
isHidden: false
}
}
非表示および次のように表示
{
this.state.isHidden ? <View style={style.activityContainer} hide={false}><ActivityIndicator size="small" color="#00ff00" animating={true}/></View> : null
}
フルリファレンス
render() {
return (
<View style={style.mainViewStyle}>
<View style={style.signinStyle}>
<TextField placeholder='First Name' keyboardType='default' onChangeFirstName={(text) => this.setState({firstName: text.text})}/>
<TextField placeholder='Last Name' keyboardType='default' onChangeFirstName={(text) => this.setState({lastName: text.text})}/>
<TextField placeholder='Email' keyboardType='email-address' onChangeFirstName={(text) => this.setState({email: text.text})}/>
<TextField placeholder='Phone Number' keyboardType='phone-pad' onChangeFirstName={(text) => this.setState({phone: text.text})}/>
<TextField placeholder='Password' secureTextEntry={true} keyboardType='default' onChangeFirstName={(text) => this.setState({password: text.text})}/>
<Button style={AppStyleSheet.buttonStyle} title='Sign up' onPress={() => this.onSignupPress()} color='red' backgroundColor='black'/>
</View>
{
this.state.isHidden ? <View style={style.activityContainer}><ActivityIndicator size="small" color="#00ff00" animating={true}/></View> : null
}
</View>
);
}
ボタンを押すと次のように状態が設定されます
onSignupPress() {
this.setState({isHidden: true})
}
隠す必要があるとき
this.setState({isHidden: false})
ただ使う
style={ width:0, height:0 } // to hide
追加のオプションは、スタイルを使用して絶対位置を適用し、、隠しコンポーネントを画面外座標に設定することです。
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => this.doSearch({input: text})}
style={this.state.hide ? {position: 'absolute', top: -200} : {}}
/>
これまでのいくつかの提案とは異なり、これはあなたのコンポーネントをビューから隠しますがBUTもそれをレンダリングし（DOMに保存します）、そのため本当に見えないになります。
私はビューを表示/非表示にしたいという同じ問題を抱えていましたが、物事が追加/削除されたときや必ずしも再レンダリングを処理するときにUIが飛び跳ねることを本当に望みませんでした。
私は私のためにそれを扱うために簡単なコンポーネントを書きました。デフォルトでアニメーション化されていますが、切り替えが簡単です。 readmeで GitHub と NPM を付けましたが、すべてのコードは以下のとおりです。
npm install --save react-native-hideable-view
import React, { Component, PropTypes } from 'react';
import { Animated } from 'react-native';
class HideableView extends Component {
constructor(props) {
super(props);
this.state = {
opacity: new Animated.Value(this.props.visible ? 1 : 0)
}
}
animate(show) {
const duration = this.props.duration ? parseInt(this.props.duration) : 500;
Animated.timing(
this.state.opacity, {
toValue: show ? 1 : 0,
duration: !this.props.noAnimation ? duration : 0
}
).start();
}
shouldComponentUpdate(nextProps) {
return this.props.visible !== nextProps.visible;
}
componentWillUpdate(nextProps, nextState) {
if (this.props.visible !== nextProps.visible) {
this.animate(nextProps.visible);
}
}
render() {
if (this.props.removeWhenHidden) {
return (this.visible && this.props.children);
}
return (
<Animated.View style={{opacity: this.state.opacity}}>
{this.props.children}
</Animated.View>
)
}
}
HideableView.propTypes = {
visible: PropTypes.bool.isRequired,
duration: PropTypes.number,
removeWhenHidden: PropTypes.bool,
noAnimation: PropTypes.bool
}
export default HideableView;
React NativeのレイアウトはCSSと同様にdisplayプロパティをサポートしています。可能な値：noneおよびflex（デフォルト）。 https://facebook.github.io/react-native/docs/layout-props#display
<View style={{display: 'none'}}> </View>
私のモジュール react-native-display を使ってコンポーネントの表示/非表示を切り替えることができます。
コンポーネントをロードしたまま隠したままにしておく必要がある場合は、不透明度を0に設定できます（たとえば、博覧会のカメラにはこれが必要です）。
//in constructor
this.state = {opacity: 100}
/in component
style = {{opacity: this.state.opacity}}
//when you want to hide
this.setState({opacity: 0})
React Nativeでコンポーネントを表示または非表示にする唯一の方法は、stateやpropsなどのアプリの状態のパラメーターの値を確認することです。以下のような完全な例を提供しました。
import React, {Component} from 'react';
import {View,Text,TextInput,TouchableHighlight} from 'react-native'
class App extends Component {
constructor(props){
super(props);
this.state={
show:false
}
}
showCancel=()=>{
this.setState({show:true})
};
hideCancel=()=>{
this.setState({show:false})
};
renderTouchableHighlight(){
if(this.state.show){
return(
<TouchableHighlight
style={{borderColor:'black',borderWidth:1,marginTop:20}}
onPress={this.hideCancel}>
<View>
<Text>Cancel</Text>
</View>
</TouchableHighlight>
)
}
return null;
}
render() {
return (
<View style={{justifyContent:'center',alignItems:'center',flex:1}}>
<TextInput
style={{borderColor:'black',borderBottomWidth:1}}
onFocus={this.showCancel}
/>
{this.renderTouchableHighlight()}
</View>
);
}
}
export default App;
非常に簡単。以下のように（）=> this.showCancel（）に変更してください。
<TextInput
onFocus={() => this.showCancel() }
onChangeText={(text) => this.doSearch({input: text})} />
<TouchableHighlight
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
ボタンを非表示にしたり表示したりするには、以下の方法を使用します。お役に立てば幸いです。ステータスを更新してhide cssを追加するだけで十分です。
constructor(props) {
super(props);
this.state = {
visibleStatus: false
};
}
updateStatusOfVisibility () {
this.setStatus({
visibleStatus: true
});
}
hideCancel() {
this.setStatus({visibleStatus: false});
}
render(){
return(
<View>
<TextInput
onFocus={this.showCancel()}
onChangeText={(text) => {this.doSearch({input: text}); this.updateStatusOfVisibility()}} />
<TouchableHighlight style={this.state.visibleStatus ? null : { display: "none" }}
onPress={this.hideCancel()}>
<View>
<Text style={styles.cancelButtonText}>Cancel</Text>
</View>
</TouchableHighlight>
</View>)
}
実際には、私はreact-nativeまたは以下のようなものを使用するときにdisplay: 'none'によるiOSの開発では：
const styles = StyleSheet.create({
disappearImage: {
width: 0,
height: 0
}
});
IOSはonLoadなどのようなImageコンポーネントの他の何もロードしないので、私は以下のようなものを使うことにしました：
const styles = StyleSheet.create({
disappearImage: {
width: 1,
height: 1,
position: 'absolute',
top: -9000,
opacity: 0
}
});