一个全屏的文本框该怎么做



  • 我想做一个全屏的文本框,但是使用TextInput加multiline={true}配合style让他全屏后,输入文字的地方会在正中间,这该怎么设置?



  • 我这样写是正常的呀,你试试,最好贴一下代码

    export default class MyTest extends Component {
      render() {
        return (
          <View style={{flex: 1}}>
            <TextInput
              style={{flex: 1, borderWidth: 1}}
              multiline
            />
          </View>
        );
      }
    }
    


  • export default class AttenceSuppl extends Component{

    render(){
        return <View style={styles.viewBg}>
            <Header 
                title='考勤补签'
                backtext='返回'
                headerBg={{backgroundColor:'#f2f2f2'}}
                titleCol={{color:'#000000'}}
                onback={() => this.props.navigator.pop()}
            />
            <TextInput style={styles.inputSty}
                multiline={true}
                placeholder='2017年2月17日您未签到,请输入理由...' 
                underlineColorAndroid="transparent"
                />
            <TouchableOpacity style={styles.buttonSty} onPress={() => console.log('submit')}>
                <Text style={styles.btnText}>提交</Text>
            </TouchableOpacity>
        </View>
    }
    

    }

    const styles = StyleSheet.create({
    viewBg:{
    flex:1,
    },
    inputSty:{
    flex:8,
    lineHeight:20,
    paddingTop:0,
    },
    buttonSty:{
    flex:1,
    flexDirection:'row',
    justifyContent:'center',
    backgroundColor:'#d7d7d7'
    },
    btnText:{
    flex:1,
    fontSize:20,
    color:'#000000',
    marginTop:15,
    marginLeft:(width-40)/2
    }
    })

    0_1489909947770_sp170319_155029.png



  • @HermitCarb 代码差不多的,还是不行



  • 有点晚,不好意思。

    我试了下,简单修改了下样式

    export default class IOS extends Component {
      render() {
        return (
          <View style={styles.viewBg}>
            <View style={{height: 64, backgroundColor: '#303234'}}>
              {/*我没有Header标签,这里占个位置*/}
            </View>
            <TextInput
              style={styles.inputSty}
              multiline={true}
              placeholder='2017年2月17日您未签到,请输入理由...'
              underlineColorAndroid="transparent"
            />
            <TouchableOpacity style={styles.buttonSty} onPress={() => console.log('submit')}>
              <Text style={styles.btnText}>提交</Text>
            </TouchableOpacity>
          </View>    );
      }
    }
    
    
    const styles = StyleSheet.create({
      viewBg: {
        flex: 1,
      },
      inputSty: {
        flex: 8,
        lineHeight: 20,
        paddingTop: 0,
      },
      buttonSty: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',        //这里
        backgroundColor: '#d7d7d7',
      },
      btnText: {    //这里
        fontSize: 20,
        color: '#000000',
      }
    });
    

    0_1489926566755_Simulator Screen Shot 19 Mar 2017, 8.25.26 PM.png

    另:这里怎么设置设置图片的展示大小呀,我图片这么大好傻。。。。



  • @HermitCarb 同样的代码,结果还是一样,我觉得是系统的问题,IOS上这个样式是正确的,在Android上就是我这种样子了


  • administrators

    @Martinzzyy 仔细看textinput的文档



  • @sunnylqm 谢啦,是我粗心了
    “在安卓上如果设置multiline = {true},文本默认会垂直居中,可设置textAlignVertical: top样式来使其居顶显示。”


登录后回复