[javascript] 반응 네이티브에서 컴포넌트 숨기기 / 보이기

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에서 제거하는 것입니다.

이 예제에서는 버튼 클릭을 기준으로 텍스트보기의 가시성을 설정합니다.

이 작업의 기본 개념은 버튼 클릭 이벤트가 발생하면 값이 토글 될 때 초기 값이 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});
}

답변

두 이미지 사이를 전환해야했습니다. 그들 사이의 조건부 전환으로 이미지가 표시되지 않은 상태에서 5 초 지연되었습니다.

downvoted amos answer의 접근법을 사용하고 있습니다. 올바른 형식으로 코드를 주석에 넣기가 어렵 기 때문에 새로운 답변으로 게시.

렌더 기능 :

<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 조건 (예 : 렌더링 함수의 return () 부분)을 작성할 수 없으므로이 표기법을 사용해야합니다.

이 작은 트릭은 많은 경우에 매우 유용 할 수 있으며 조건을 빠르게 확인할 수 있기 때문에 개발에 사용하는 것이 좋습니다.

문안 인사,

답변

부모보기 숨기기 및 표시Activity 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>
   );
}

On 버튼은 다음과 같이 설정된 상태를 누름

onSignupPress() {
  this.setState({isHidden: true})
}

숨겨야 할 때

this.setState({isHidden: false})