Ẩn / Hiển thị các thành phần trong phản ứng gốc

Tôi thực sự mới với React Native và tôi tự hỏi làm thế nào tôi có thể ẩn / hiển thị một thành phần.
Đây là trường hợp thử nghiệm của tôi:

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

Tôi có một TextInputthành phần, điều tôi muốn là hiển thị TouchableHighlightkhi đầu vào lấy tiêu điểm, sau đó ẩn TouchableHighlightkhi người dùng nhấn nút hủy.

Tôi không biết cách "truy cập" TouchableHighlightthành phần này để ẩn / hiển thị nó bên trong các chức năng của mình showCancel/hideCancel.
Ngoài ra, làm thế nào tôi có thể ẩn nút ngay từ đầu?

Tôi sẽ làm một cái gì đó như thế này:

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

});

Trong chức năng kết xuất của bạn:

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

Sau đó, chỉ cần làm:

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

Trong phản ứng hoặc phản ứng tự nhiên, cách ẩn / hiển thị thành phần hoặc thêm / xóa không hoạt động như trong Android hoặc iOS. Hầu hết chúng ta nghĩ rằng sẽ có chiến lược tương tự như

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

Nhưng cách phản ứng công việc bản địa là hoàn toàn khác nhau. Cách duy nhất để đạt được loại chức năng này là đưa thành phần của bạn vào DOM hoặc xóa khỏi DOM.

Ở đây trong ví dụ này tôi sẽ thiết lập khả năng hiển thị của chế độ xem văn bản dựa trên nút bấm.

Ý tưởng đằng sau tác vụ này là tạo một biến trạng thái được gọi là trạng thái có giá trị ban đầu được đặt thành false khi sự kiện nhấn nút xảy ra sau đó giá trị bật. Bây giờ chúng ta sẽ sử dụng biến trạng thái này trong quá trình tạo thành phần.

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

điều duy nhất cần chú ý trong đoạn mã này là renderIfđây thực sự là một hàm sẽ trả về thành phần được truyền cho nó dựa trên giá trị boolean được truyền cho nó.

renderIf(predicate)(element)

renderif.js

'use strict';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
  predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;

trong render () bạn có thể hiển thị một cách có điều kiện JSX hoặc trả về null như trong:

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

Tôi cần phải chuyển đổi giữa hai hình ảnh. Với chuyển đổi có điều kiện giữa chúng, có độ trễ 5sec không có hình ảnh hiển thị.

Tôi đang sử dụng phương pháp tiếp cận từ câu trả lời của amos. Đăng dưới dạng câu trả lời mới vì thật khó để đưa mã vào bình luận với định dạng phù hợp.

Chức năng kết xuất:

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

Kiểu dáng:

var styles = StyleSheet.create({
  logo: {
    width: 200,
    height: 200,
  },
  hidden: {
    width: 0,
    height: 0,
  },
});

Hầu hết thời gian tôi đang làm một cái gì đó như thế này:

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

Nếu bạn chưa quen với lập trình, dòng này phải lạ đối với bạn:

{this.state.isHidden ? <ToHideAndShowComponent/> : null}

Dòng này tương đương với

if (this.state.isHidden)
{
  return ( <ToHideAndShowComponent/> );
}
else
{
  return null;
}

Nhưng bạn không thể viết một điều kiện if / other trong nội dung JSX (ví dụ: phần return () của hàm kết xuất) để bạn sẽ phải sử dụng ký hiệu này.

Thủ thuật nhỏ này có thể rất hữu ích trong nhiều trường hợp và tôi khuyên bạn nên sử dụng nó trong quá trình phát triển của mình vì bạn có thể nhanh chóng kiểm tra một điều kiện.

Trân trọng,

Ẩn và hiển thị chế độ xem của phụ huynhActivity Indicator

constructor(props) {
  super(props)

  this.state = {
    isHidden: false
  }  
} 

Ẩn và hiển thị như sau

{
   this.state.isHidden ?  <View style={style.activityContainer} hide={false}><ActivityIndicator size="small" color="#00ff00" animating={true}/></View> : null
}

Tham khảo đầy đủ

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

Nhấn nút nhấn đặt trạng thái như sau

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

Khi bạn cần ẩn

this.setState({isHidden: false})

Bố cục của React Native có displayhỗ trợ thuộc tính, tương tự như CSS. Các giá trị có thể: nonevà flex(mặc định). https://facebook.github.io/react-native/docs/layout-props#display

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

chỉ dùng

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

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

tuyên bố hiển thị sai vì vậy theo chế độ / chế độ xem mặc định được ẩn

ví dụ = () => {

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

}

** Chức năng gọi **

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

Tôi có cùng một vấn đề khi tôi muốn hiển thị / ẩn Chế độ xem, nhưng tôi thực sự không muốn giao diện người dùng nhảy xung quanh khi mọi thứ được thêm / xóa hoặc nhất thiết phải xử lý kết xuất lại.

Tôi đã viết một Thành phần đơn giản để đối phó với nó. Hoạt hình theo mặc định, nhưng dễ dàng để chuyển đổi. Tôi đặt nó trên GitHub và NPM với một readme, nhưng tất cả các mã dưới đây.

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;

Một tùy chọn bổ sung là áp dụng định vị tuyệt đối thông qua kiểu dáng , đặt thành phần ẩn trong tọa độ ngoài màn hình:

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

Không giống như trong một số đề xuất trước đây, điều này sẽ ẩn thành phần của bạn khỏi chế độ xem NHƯNG cũng sẽ hiển thị nó (giữ nó trong DOM), do đó làm cho nó thực sự vô hình .

Nếu bạn cần thành phần vẫn được tải nhưng ẩn, bạn có thể đặt độ mờ thành 0. (ví dụ tôi cần điều này cho máy ảnh expo)

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

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

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

Bạn có thể sử dụng mô-đun phản ứng gốc của tôi để hiển thị / ẩn các thành phần.

Ví dụ sau đây là mã hóa trong bản thảo với Móc.

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)}}/>

Rất dễ. Chỉ cần thay đổi thành () => this.show Hủy () như bên dưới:

<TextInput
        onFocus={() => this.showCancel() }
        onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

tôi chỉ sử dụng phương pháp dưới đây để ẩn hoặc xem một nút. hy vọng nó sẽ giúp bạn chỉ cần cập nhật trạng thái và thêm ẩn css là đủ cho tôi

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

Trên thực tế, trong quá trình phát triển iOS, react-nativekhi tôi sử dụng display: 'none'hoặc đại loại như dưới đây:

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

IOS không tải bất cứ thứ gì khác của thành phần Image như onLoad, v.v., vì vậy tôi quyết định sử dụng một cái gì đó như dưới đây:

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

Cách duy nhất để hiển thị hoặc ẩn một thành phần trong phản ứng gốc là kiểm tra giá trị của một tham số của trạng thái ứng dụng như statehoặc props. Tôi đã cung cấp một ví dụ đầy đủ như dưới đây:

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;

Nếu bạn muốn ẩn nó nhưng giữ không gian bị chiếm bởi thành phần như visibility: hiddencài đặt của css theo kiểu của thành phần opacity: 0thì nên thực hiện thủ thuật.

Tùy thuộc vào thành phần, các bước khác trong việc vô hiệu hóa chức năng có thể được yêu cầu vì có thể tương tác với một vật phẩm vô hình.

Bạn có thể sử dụng các điều kiện để hiển thị và ẩn các thành phần

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

);
}

đó là tất cả. thưởng thức mã hóa của bạn ...