touchableOpacityのヌルの高さを取得

Question

こんにちは私はネイティブに反応するために新しいです、私はudemyからコースをフォローしています。コースではカスタムボタンを作成している間、ボタンの高さがヌルになっていますが、コースインストラクターによればボタンの高さが必要です。以下は

は以下Button.jsここ

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

const Button = ({onPress, children}) => { 

    return (
      <TouchableOpacity onPress={onPress} style={styles.buttonStyle}> 
       <Text style={styles.textStyle}> {children} </Text> 
      </TouchableOpacity> 
     ); 
}; 

const styles = { 
    buttonStyle: { 
     flex: 1, 
     alignSelf: 'stretch', 
     backgroundColor: '#fff', 
     borderRadius: 5, 
     borderWidth: 1, 
     borderColor: '#007aff', 
     marginLeft: 5, 
     marginRight: 5 
    }, 
    textStyle: { 
     fontSize: 16, 
     paddingTop: 10, 
     paddingBottom: 10, 
     color: '#007aff', 
     fontWeight: '600' 
    } 
}; 

export {Button} ; 

がされている

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; 

App.js

のソースコードで期待される出力はどうあるべきか：

はこれがあります私が得ている実際の出力：

それはapp.js内の親<View></View>内のすべてのスペースを占めるので、あなたの<Header />は、いくつかの高さを持っている必要がありますので、事前

Answer 1

のおかげではこれがあります。今度は<TouchableOpacity>の中にbutton.jsの高さがありません（フレックスしかありません）。フレックスを使うだけで、残っている空き領域を占有し、自分自身の高さを取ることはありません。 app.jsの親<View>には自分自身の高さがないため、空き領域がありません。親の<View>'の高さは、高さと同じになります。<Header>.ボタンに使用できるスペースがありません。

button.jsの内部では、buttonStyleのような高さを200と指定してください。それに幅を与えることもできます。

この問題を解決するには、親の<View>に高さ（ヘッダーの高さ以上）を適用することもできます。

希望しました！

Answer 2

あなたは

const Button = props => (
    <TouchableOpacity onPress={props.onPress} style={styles.buttonStyle}> 
    <Text style={styles.textStyle}>{props.children}</Text> 
    </TouchableOpacity> 
); 

export default Button; 

以下にButton.jsにわずかな変更を加えることができ、あなたのApp.jsに、あなたは、Buttonコンポーネントに以下のように

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

Answer 3

import React, { Component } from 'react'; 
import { View } 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: 'AIzaSyCnz8V-MuEiOWcs3oyBBxyO6BCjpAGJm7o', 
     authDomain: 'react-native-auth-284c7.firebaseapp.com', 
     databaseURL: 'https://react-native-auth-284c7.firebaseio.com', 
     storageBucket: 'react-native-auth-284c7.appspot.com', 
     messagingSenderId: '1049444233116' 
    }); 


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

    renderContent() { 
    switch (this.state.loggedIn) { 
     case true: 
     return <View style={styles.buttonContainerStyle}> 
      <Button onPress={() => firebase.auth().signOut()}> 
      Log Out 
      </Button> 
     </View>; 
     case false: 
     return <LoginForm />; 
     default: 
     return <Spinner size="large" />; 
    } 
    } 

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

const styles = { 
    buttonContainerStyle: { 
    flexDirection: 'row', 
    height: 40 
    } 
}; 

export default App; 

をそれらの小道具を渡すことができます

https://github.com/csjcode/react-native-auth/blob/master/src/App.jsからこのコードをコピーしました。このコードは私のために働いた