ซ่อน / แสดงองค์ประกอบในการตอบสนองพื้นเมือง

ฉันยังใหม่กับ 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

ในตัวอย่างนี้ฉันจะตั้งค่าการแสดงผลของมุมมองข้อความตามการคลิกปุ่ม

แนวคิดเบื้องหลังภารกิจนี้คือการสร้างตัวแปรสถานะที่เรียกว่าสถานะที่มีค่าเริ่มต้นตั้งค่าเป็นเท็จเมื่อเหตุการณ์การคลิกปุ่มเกิดขึ้นจากนั้นค่าจะสลับ ตอนนี้เราจะใช้ตัวแปรสถานะนี้ในระหว่างการสร้างองค์ประกอบ

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;

ในการแสดงผล () คุณสามารถแสดง JSX ตามเงื่อนไขหรือส่งคืน null ได้ใน:

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

ฉันต้องการสลับไปมาระหว่างสองภาพ ด้วยการสลับเงื่อนไขระหว่างพวกเขามีความล่าช้า 5 วินาทีโดยไม่มีภาพปรากฏขึ้น

ฉันใช้วิธีการจากคำตอบ amv downvoted การโพสต์เป็นคำตอบใหม่เพราะเป็นการยากที่จะใส่รหัสลงในความคิดเห็นด้วยการจัดรูปแบบที่เหมาะสม

ฟังก์ชั่นการแสดงผล:

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

แต่คุณไม่สามารถเขียนเงื่อนไข if / else ในเนื้อหา JSX (เช่น 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>
   );
}

บนปุ่มกดตั้งค่าสถานะดังนี้

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

เมื่อคุณต้องซ่อน

this.setState({isHidden: false})

รูปแบบของ Native React ได้รับdisplayการสนับสนุนคุณสมบัติคล้ายกับ CSS ค่าที่เป็นไปได้: noneและflex(ค่าเริ่มต้น) https://facebook.github.io/react-native/docs/layout-props#display

<View style={{display: 'none'}}> </View>

เพียงแค่ใช้

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

ฉันมีปัญหาเดียวกันกับที่ฉันต้องการแสดง / ซ่อน Views แต่ฉันไม่ต้องการให้ UI กระโดดไปมาเมื่อมีการเพิ่ม / ลบหรือจำเป็นต้องจัดการกับการแสดงผลซ้ำ

ฉันเขียนชิ้นส่วนง่าย ๆ เพื่อจัดการกับมันให้ฉัน เคลื่อนไหวตามค่าเริ่มต้น แต่สลับได้ง่าย ฉันวางไว้บนGitHubและNPMพร้อม readme แต่โค้ดทั้งหมดอยู่ด้านล่าง

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;

ตัวเลือกเพิ่มเติมคือการใช้การกำหนดตำแหน่งแบบสัมบูรณ์ผ่านการใส่สไตล์การตั้งค่าคอมโพเนนต์ที่ซ่อนอยู่ในพิกัดที่ไม่อยู่ในขอบเขตหน้าจอ:

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

ซึ่งแตกต่างจากในบางส่วนของข้อเสนอแนะก่อนหน้านี้จะซ่อนส่วนประกอบของคุณจากมุมมอง แต่ยังจะทำให้มัน (ให้มันได้ใน DOM) จึงทำให้มันอย่างแท้จริงที่มองไม่เห็น

constructor(props) {
    super(props);
    this.state = {
      visible: true,
}
}

ประกาศเท็จที่มองเห็นได้ดังนั้นโดย modal / view เริ่มต้นจะซ่อน

ตัวอย่าง = () => {

 this.setState({ visible: !this.state.visible })

}

** ฟังก์ชั่นการโทร **

{this.state.visible == false ?
        <View>
            <TouchableOpacity
              onPress= {() => this.example()}>   // call function
                          <Text>
                            show view
                          </Text>
            </TouchableOpacity>

</View>
:
 <View>
    <TouchableOpacity
              onPress= {() => this.example()}>
                          <Text>
                            hide view
                          </Text>
            </TouchableOpacity>
</View> 
 }

หากคุณต้องการให้ส่วนประกอบยังคงโหลดอยู่ แต่ซ่อนอยู่คุณสามารถตั้งค่าความทึบเป็น 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-display ของฉันเพื่อแสดง / ซ่อนส่วนประกอบ

ตัวอย่างต่อไปนี้คือการเข้ารหัสใน typescript ด้วย hooks

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>
  ......

}

// You can use a state to control wether the component is showing or not
const [show, setShow] = useState(false); // By default won't show

// In return(
{
    show && <ComponentName />
}

/* Use this to toggle the state, this could be in a function in the 
main javascript or could be triggered by an onPress */

show == true ? setShow(false) : setShow(true)

// Example:
const triggerComponent = () => {
    show == true ? setShow(false) : setShow(true)
}

// Or
<SomeComponent onPress={() => {show == true ? setShow(false) : setShow(true)}}/>

ง่ายมาก. เพียงเปลี่ยนเป็น () => 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>

ฉันแค่ใช้วิธีการด้านล่างเพื่อซ่อนหรือดูปุ่ม หวังว่ามันจะช่วยคุณ เพียงอัปเดตสถานะและเพิ่มซ่อน 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>)
}

ที่จริงแล้วในการพัฒนา iOS โดยreact-nativeเมื่อฉันใช้display: 'none'หรือสิ่งที่ชอบด้านล่าง:

const styles = StyleSheet.create({
  disappearImage: {
    width: 0,
    height: 0
  }
});

iOS ไม่โหลดสิ่งอื่นใดขององค์ประกอบภาพเช่นonLoadหรืออื่น ๆ ดังนั้นฉันจึงตัดสินใจใช้สิ่งต่อไปนี้:

const styles = StyleSheet.create({
  disappearImage: {
    width: 1,
    height: 1,
    position: 'absolute',
    top: -9000,
    opacity: 0
  }
});

วิธีเดียวที่จะแสดงหรือซ่อนองค์ประกอบในการตอบสนองพื้นเมืองคือการตรวจสอบค่าของพารามิเตอร์ของรัฐแอปเหมือนหรือ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;

หากคุณต้องการซ่อนมัน แต่ให้พื้นที่ที่ถูกครอบครองโดยองค์ประกอบเช่นการvisibility: hiddenตั้งค่าของ CSS ในสไตล์ขององค์ประกอบopacity: 0ควรทำเคล็ดลับ

ขึ้นอยู่กับองค์ประกอบขั้นตอนอื่น ๆ ในการปิดการใช้งานฟังก์ชั่นอาจจำเป็นต้องมีการโต้ตอบกับรายการที่มองไม่เห็นเป็นไปได้

คุณสามารถใช้เงื่อนไขในการแสดงและซ่อนส่วนประกอบ

constructor(){

    super();

    this.state ={

      isVisible:true

    }
  }

  ToggleFunction = () => {

    this.setState(state => ({

      isVisible: !state.isVisible

    }));

  };

  render() {
  
    return (

      <View style={styles.MainContainer}>

      {

        this.state.isVisible ? <Text style= {{ fontSize: 20, color: "red", textAlign: 'center' }}> Hello World! </Text> : null
      }

      <Button title="Toggle Visibility" onPress={this.ToggleFunction} />

      </View>
    );
  }

checkincheckout = () => {
        this.setState({ visible: !this.state.visible })
}

render() {
        return (
{this.state.visible == false ?
        <View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 50 }}>

        <View style={{ flex: 1, alignItems: 'center', flexDirection: 'column' }}>

            <TouchableOpacity onPress={() => this.checkincheckout()}>

                <Text style={{ color: 'white' }}>Click to Check in</Text>

            </TouchableOpacity>

        </View>

    </View>
:
<View style={{ alignItems: 'center', flexDirection: 'row', marginTop: 50 }}>

<View style={{ flex: 1, alignItems: 'center', flexDirection: 'column' }}>

   <TouchableOpacity onPress={() => this.checkincheckout()}>

        <Text style={{ color: 'white' }}>Click to Check out</Text>

    </TouchableOpacity>

</View>

</View>
 }

);
}

นั่นคือทั้งหมด เพลิดเพลินกับการเข้ารหัสของคุณ ...