Question

如何在React Native中点击屏幕顶部的按钮，将视图添加到屏幕底部？

Answer 1

根据状态有条件地渲染屏幕底部的视图，并在按钮的OnPress方法上将其设置为true

Answer 2

我认为最好先了解一下反应/反应本地的状态和道具以及其他基本概念：

https://facebook.github.io/react-vr/docs/components-props-and-state.html

但是你可以这样做：如果您可以将该部分视为，则需要定义状态假，然后按下按钮，将该状态的值更改为真

import React from 'react';

import {Text,View,TouchableOpacity} from 'react-native';

export default class testComponent extends React.Component {

constructor(){
    super()
    this.state = {
        viewSection :false
    }
}

renderBottomComponent(){
    if(this.state.viewSection) {
        return (
            <View>
                <Text>Hi!</Text>
            </View>
        )
    }
}

buttonPress=()=>{
    this.setState({viewSection:true})
}

render() {
    return (
        <View >
            <TouchableOpacity onPress={this.buttonPress}>
                <Text> Click Me!</Text>
            </TouchableOpacity>
            {this.renderBottomComponent()}
        </View>
         );
      }
}

通过单击按钮添加视图 - REACT NATIVE

2 个答案: