如何将CardItem固定到页面底部-本机响应

时间:2018-08-09 03:52:03

标签: react-native native-base

我正在使用native-base库。我要制作此页面:

enter image description here

但是我不能在页面底部设置第二个CardItem。我的代码:

  <View style={{ flex: 1,flexDirection: 'column',backgroundColor:'#ddd'}}>
  <Card style={{flex: 1,margin:0}} transparent>
    <CardItem style={{flex: 9,backgroundColor:'#fff'}}>
      <TextInput
        multiline = {true}
        numberOfLines = {4}
        style={{height: '90%',width:'100%'}}
        placeholder="لطفا سوال خود را در حداکثر ۲۵۰ کاراکتر مطرح کنید و سپس شرکت کنندگان در این نظرسنجی را انتخاب کنید..."
        onChangeText={(text) => this.setState({text})}
      />
    </CardItem>


    <CardItem style={{height:100,flex: 1,flexDirection: 'column'}}>
      <HorizentalLine />
        <View  style={{flex: 1,flexDirection: 'row',height:50}}>
          <View style={{width:'50%',height:50}}>
            <Icon  style={{position:'absolute',left:0,color:colorConstants.ONE_APP_COLOR,fontSize:20,margin:12}} type="Feather" name="user" />
            <TouchableOpacity onPress={()=>this.goTo('SelectContacts')}>
              <Text style={{marginTop:14}}>انتخاب شرکت کنندگان</Text>
            </TouchableOpacity>


          </View>
          <View style={{width:'50%',height:50,justifyContent:'flex-start'}}>
            <TouchableOpacity
            style={{position:'absolute',right:0,margin:12}}
            onPress={()=>this.selectFile()}>
              <Icon  style={{color:colorConstants.ONE_APP_COLOR,fontSize:20}} type="Entypo" name="attachment" />
            </TouchableOpacity>
          </View>
        </View>
    </CardItem>
    </Card>


  </View>

结果:

enter image description here

0 个答案:

没有答案