web-dev-qa-db-ja.com

反応ネイティブでコンポーネントを非表示/表示

私は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の中に隠したり表示したりするために「アクセス」する方法を知りません。
また、ボタンを最初から隠すにはどうすればよいですか。

114
Crysfel

私はこのようなことをするだろう:

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()}          
        );
    }

});
113
Mayank Patel

あなたのレンダリング機能では:

{ this.state.showTheThing && 
  <TextInput/>
}

それからちょうどしなさい:

this.setState({showTheThing: true})  // to show it  
this.setState({showTheThing: false}) // to hide it
105
Krishan Gupta

コンポーネントの非表示/表示または追加/削除の方法で反応またはネイティブに反応することは、AndroidまたはiOSの場合のようには機能しません。私たちのほとんどは、同じような戦略があると思います

View.hide = true or parentView.addSubView(childView)

しかし、ネイティブワークに反応する方法はまったく異なります。この種の機能を実現する唯一の方法は、コンポーネントをDOMに含めるか、DOMから削除することです。

この例では、ボタンクリックに基づいてテキストビューの表示/非表示を設定します。

enter image description here

このタスクの背後にある考え方は、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;
42

render()では、条件付きでJSXを表示することも、次のようにnullを返すこともできます。

render(){
    return({yourCondition ? <yourComponent /> : null});
}
15
Mar

2つの画像を切り替える必要がありました。それらの間の条件付き切り替えでは、画像が表示されずに5秒の遅延があった。

私は下落した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,
  },
});

screencast

12
mauron85

ほとんどの場合、私はこのようなことをしています。

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()部分)を記述することはできませんので、この表記法を使用する必要があります。

この小さなトリックは多くの場合非常に役に立つことがあります、そして、あなたはすぐに条件をチェックすることができるので私はあなたがあなたの開発でそれを使うことを勧めます。

よろしく、

10
KuroAku

enter image description here

非表示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})
10
Harshal Valanda

ただ使う

style={ width:0, height:0 } // to hide
8
amos

追加のオプションは、スタイルを使用して絶対位置を適用し、、隠しコンポーネントを画面外座標に設定することです。

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})}
    style={this.state.hide ? {position: 'absolute', top: -200} : {}}
/>

これまでのいくつかの提案とは異なり、これはあなたのコンポーネントをビューから隠しますがBUTもそれをレンダリングし(DOMに保存します)、そのため本当に見えないになります。

6
d4vidi

私はビューを表示/非表示にしたいという同じ問題を抱えていましたが、物事が追加/削除されたときや必ずしも再レンダリングを処理するときにUIが飛び跳ねることを本当に望みませんでした。

私は私のためにそれを扱うために簡単なコンポーネントを書きました。デフォルトでアニメーション化されていますが、切り替えが簡単です。 readmeで GitHubNPM を付けましたが、すべてのコードは以下のとおりです。

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;
6
Tonithy

React NativeのレイアウトはCSSと同様にdisplayプロパティをサポートしています。可能な値:noneおよびflex(デフォルト)。 https://facebook.github.io/react-native/docs/layout-props#display

<View style={{display: 'none'}}> </View>
4
Estevão Lucas

私のモジュール react-native-display を使ってコンポーネントの表示/非表示を切り替えることができます。

2
Danny Michaeli

コンポーネントをロードしたまま隠したままにしておく必要がある場合は、不透明度を0に設定できます(たとえば、博覧会のカメラにはこれが必要です)。

//in constructor    
this.state = {opacity: 100}

/in component
style = {{opacity: this.state.opacity}}

//when you want to hide
this.setState({opacity: 0})
2
ykay

React Nativeでコンポーネントを表示または非表示にする唯一の方法は、statepropsなどのアプリの状態のパラメーターの値を確認することです。以下のような完全な例を提供しました。

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;

Here is the result

2
meisam nazari

非常に簡単。以下のように()=> 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>
0
Lim Neo

ボタンを非表示にしたり表示したりするには、以下の方法を使用します。お役に立てば幸いです。ステータスを更新して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>)
}
0
Kiran Chenna

実際には、私は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
  }
});
0
Mehr88sh