リアクションネイティブ：コンポーネントの異常な注文

Question

以下を参照してください。作成ボタンは底部にあるはずですが、その日のピッカーの上にあるようです。

レポは、具体的には、これらの構成要素を有するファイルはhereあるこのlocation

です。

シミュレータの外観は次のとおりです。「作成」ボタンが下部に表示されます。 （これはところで素晴らしいことだ）私は同じチュートリアルに従っている

import React, { Component } from 'react'; 
//import { View, Text } from 'react-native'; 
import { connect } from 'react-redux'; 
import { Picker, Text } from 'react-native'; 
import { employeeUpdate } from '../actions'; 
import { Card, CardSection, Input, Button } from './common'; 

class EmployeeCreate extends Component { 
    render() { 
    return (
    // 
    // <View> 
    // <Text>Employees</Text> 
    // </View> 
     <Card> 
     <CardSection> 
      <Input 
      label="Name" 
      placeholder="Jane" 
      value={this.props.name} 
      onChangeText={value => this.props.employeeUpdate({ prop: 'name', value })} 
      /> 
     </CardSection> 

     <CardSection> 
      <Input 
      label="Phone" 
      placeholder="555-555-5555" 
      value={this.props.phone} 
      onChangeText={value => this.props.employeeUpdate({ prop: 'phone', value })} 
      /> 
     </CardSection> 
     <CardSection style={{ flexDirection: 'column' }}> 
     <Text style={styles.pickerLabelStyle}>Pick a Shift: </Text> 
     <Picker 
      style={{ flex: 1 }} 
      selectedValue={this.props.shift} 
      onValueChange={value => this.props.employeeUpdate({ prop: 'shift', value })} 
     > 
      <Picker.Item label="Monday" value="Monday" /> 
      <Picker.Item label="Tuesday" value="Tuesday" /> 
      <Picker.Item label="Wednesday" value="Wednesday" /> 
      <Picker.Item label="Thursday" value="Thursday" /> 
      <Picker.Item label="Friday" value="Friday" /> 
      <Picker.Item label="Saturday" value="Saturday" /> 
      <Picker.Item label="Sunday" value="Sunday" /> 
     </Picker> 
     </CardSection> 

     <CardSection> 
      <Button> 
      Create 
      </Button> 
     </CardSection> 
     </Card> 
    ); 
    } 
} 
const styles = { 
    pickerLabelStyle: { 
    fontSize: 18, 
    paddingLeft: 20 
    } 
}; 
const mapStateToProps = (state) => { 
    const { name, phone, shift } = state.employeeForm; 

    return { name, phone, shift }; 
}; 
export default connect(mapStateToProps, { employeeUpdate })(EmployeeCreate); 

Answer 1

、およびピッカーコンポーネントが私のために働いstyle={{ flex: 1 }}内部コメントアウト/削除する：ここで

は、コンポーネントのコードです！