ボタンの配置が間違っている場合

Question

私が使用しているコンポーネントはすべてTextInputを除いて作成されています。別のNavigatorルートでは、TextInput以外のすべてのコンポーネントを使用し、意図したとおりに動作しました。しかし、この場合には、いくつかは、どのように私の湖底の位置はカードの位置ではなく、外を見る//ボタン

// GoalForm.js

import React, { Component } from 'react'; 
import { View, Text } from 'react-native'; 
import { Header, Button, Card } from '../components'; 
import { TextInput } from '@shoutem/ui'; 

export default class GoalList extends Component { 
    constructor(props) { 
     super(props); 
    } 

    styles = { 
     nameGoalContainer: { 
      flexDirection: 'row' 
     }, 
     center: { 
      flexDirection: 'column', 
      justifyContent: 'center' 
     }, 
     rightLabels: { 
      fontWeight: 'bold', 
      fontSize: 17 
     } 
    } 

    render() { 
     return (
      <View style={{ flex:1 }}> 
       <Header text="New Goal" color='#3f51b5' /> 
       <Card> 
        <View style={this.styles.nameGoalContainer}> 
         <View style={ [this.styles.center, { marginRight: 15 }] }> 
          <Text style={this.styles.rightLabels}>Title</Text> 
         </View> 
         <TextInput 
          maxLength={30} 
          placeholder="Buy a new graphics card" 
          style={{ flex: 3, textAlign: 'center' }} 
         /> 
        </View> 
       </Card> 
       <Button 
        text="+" 
        onPress={() => { console.log('Hello') } } 
        size='50' 
        fontSize='25' 
        color='#FFD600' 
        fontColor='white' 
        style= {{ 
         bottom: 20, 
         right: 20 
        }} 
       /> 
      </View> 
     ); 
    } 
} 

// Card.js

import React, { Component } from 'react'; 
import { View, Platform } from 'react-native'; 

class Card extends Component { 
    constructor(props) { 
     super(props); 
    } 

    generateComponent() { 
     const { cardStyleAndroid } = this.styles; 
     const { style } = this.props; 

     switch (Platform.OS) { 
      case 'android': 
       return (
        <View style={[ cardStyleAndroid, style ]}> 
         { this.props.children } 
        </View> 
       ); 
      case 'ios': 
       return 0; 
     } 
    } 

    render() { 
     return (
      <View> 
       { this.generateComponent() } 
      </View> 
     ); 
    } 

    styles = { 
     cardStyleAndroid: { 
      elevation: 2, 
      padding: 10, 
      backgroundColor: 'white', 
      marginHorizontal: 10, 
      marginVertical: 7 
     } 
    } 
} 

Card.propTypes = { 
    platform: React.PropTypes.string.isRequired, 
    style: React.PropTypes.object.isRequired, 
    children: React.PropTypes.object.isRequired 
}; 

export default Card; 

に従います。 JS

import React, { Component } from 'react'; 
import { View, Platform } from 'react-native'; 

class Button extends Component { 
    constructor(props) { 
     super(props); 
    } 

    generateComponent() { 
     const { cardStyleAndroid } = this.styles; 
     const { style } = this.props; 

     switch (Platform.OS) { 
      case 'android': 
       return (
        <View style={[ cardStyleAndroid, style ]}> 
         { this.props.children } 
        </View> 
       ); 
      case 'ios': 
       return 0; 
     } 
    } 

    render() { 
     return (
      <View> 
       { this.generateComponent() } 
      </View> 
     ); 
    } 

    styles = { 
     cardStyleAndroid: { 
      elevation: 2, 
      padding: 10, 
      backgroundColor: 'white', 
      marginHorizontal: 10, 
      marginVertical: 7 
     } 
    } 
} 

Button.propTypes = { 
    platform: React.PropTypes.string.isRequired, 
    style: React.PropTypes.object.isRequired, 
    children: React.PropTypes.object.isRequired 
}; 

export default Button; 

// Header.js

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

const generateShadow =() => { 
    switch(Platform.OS) { 
     case 'android': 
      return { elevation: 5 }; 
     case 'ios': 
      return 0; 
    } 
} 

const Header = (props) => { 
    const { textStyle, viewStyle } = styles; 

    return (
     <View style={ [ viewStyle, { backgroundColor: props.color }, generateShadow() ] }> 
      <Text style={textStyle}>{ props.text }</Text> 
     </View> 
    ); 
}; 

Header.propTypes = { 
    color: React.PropTypes.string.isRequired, 
    text: React.PropTypes.string.isRequired, 
}; 

const styles = { 
    textStyle: { 
     color: 'white', 
     fontWeight: 'bold', 
     fontSize: 20 
    }, 
    viewStyle: { 
     paddingLeft: 20, 
     height: 55, 
     flexDirection: 'column', 
     justifyContent: 'space-around' 
    } 
}; 

export default Header; 

誰も私がここで紛失していることを察知できますか？ありがとうございます。

Answer 1

フレックスのあるビューでカードコンポーネントを折り返す必要がありました：1