Question

嗨，我是新来的本地人，我正在接受来自udemy的课程。在创建自定义按钮的过程中，我获得了按钮的空高度，但根据课程讲师，按钮应该有高度。

以下是App.js的源代码

def checker(a_list):
    return all(str(item).isdigit() for item in a_list)

以下是Button.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import firebase from 'firebase';
import { Header, Button, Spinner } from './components/common';
import LoginForm from './components/LoginForm';

class App extends Component {

    state = { loggedIn: null };

    componentWillMount() {
        firebase.initializeApp({
            apiKey: 'AIzaSyB9AnPpTlaO5XbzPOhPPVBhCbn0SEel7hw',
            authDomain: 'authentication-ce600.firebaseapp.com',
            databaseURL: 'https://authentication-ce600.firebaseio.com',
            projectId: 'authentication-ce600',
            storageBucket: 'authentication-ce600.appspot.com',
            messagingSenderId: '979192009377'
        });

    firebase.auth().onAuthStateChanged((user) => {
        if (user){
            this.setState({ loggedIn: true });
        }
        else{
            this.setState({ loggedIn: false });
        }
    });
}

renderContent (){
    switch (this.state.loggedIn) {

        case true:
            return (
                <Button>
                    Log Out
                </Button>
                );
        case false:
            return <LoginForm />;
        default: 
            return <Spinner size="large" />;
    }

}

    render (){
        return (
                <View>
                <Header headerText="Auth"/>
                    {this.renderContent()}
                </View>
            );
    }
};


export default App;

这是预期的输出应该是： all

这是我得到的实际输出：

提前致谢

Answer 1

这是因为您的<Header />必须有一定的高度，因此它会占用<View></View>内的父app.js内的所有空间。现在，因为你<TouchableOpacity>里面的button.js没有任何高度（它只有flex）。只需弯曲它就会占用剩余的可用空间而不占用它自己的任何高度。由于app.js中的父<View>没有自己的高度，因此没有可用空间。父<View>'的高度将等于<Header>.的高度。按钮没有可用空间。

要快速解决问题，请在button.js内加buttonStyle 200 <View>。你也可以给它一些宽度。

您还可以将高度（超过标题的高度）应用于您的父级const Button = props => ( <TouchableOpacity onPress={props.onPress} style={styles.buttonStyle}> <Text style={styles.textStyle}>{props.children}</Text> </TouchableOpacity> ); export default Button;，以免此问题消失。

希望我帮助过！

Answer 2

你可以稍微改变Button.js到

<Button
   onPress={() => {
     console.log('clicked');
   }}
   children={'Text Name'}
/>

在你的App.js中，你可以将这些道具传递给Button组件，

#include <iostream>
#include <string>
using namespace std;
int n,counter=0;
int operate (string t)
{
    int st=t.find_first_of('E');
    for(st; st<t.length(); st++)
    {
        if(t[st]=='.')
        {
            continue;
        }
        else
        {
            counter++;
        }
    }
    return counter;
}
string k;
int main()
{
    cin>>n;
    for (int i=1; i<=n; i++)
    {
        cin>>k;
        operate(k);
    }
    return 0;
}

为touchableOpacity获取null高度

2 个答案: