在React Native中更改TextInput fontsize onchangetext

Question

我想在获得多个x字符时调整textinput fontsize。我正在尝试使用fontsize数字更新状态，但是当我更新它时，textinput重新启动并且fontsize在lineheight上有问题。

这是我的代码

    import React, { Component } from "react";
    import * as Expo from "expo";
    import Modal from "react-native-modalbox";
    import Dimensions from "Dimensions";

    import { Image, StyleSheet, View, Text, Platform} from "react-native";
    import { Container, Content, Body, Header, Footer, Left, Title, Thumbnail, Icon, Spinner, Button, Input, Right, Form} from "native-base";

    import { bindActionCreators } from "redux";
    import { connect } from "react-redux";
    import { addPostAction } from "../../actions/actions";

    class doPost extends Component {
      constructor(props) {
        super(props);
        this.state = {
          loading: true,
          newPostContent: "",
          tInputfontSize:40
        };
      }

      doPost() {
        this.props.addPostAction({
          user_id: 1, content: this.state.newPostContent
        });
      }

      _goBack() {
        console.log("Back button pressed");
        this.props.navigation.goBack();
      }

      _changeText(text) {
        this.setState({ newPostContent: text })
        this.setState({ tInputfontSize: (text.length > 10 ? 30 : 40) });
  }

      render() {
        return (
          <Container style={styles.container}>
            <Header style={styles.topMargin}>
              <Right style={{flex: 1}}>
                <Button transparent onPress={this.doPost.bind(this)} style={{justifyContent: "center", width: 90}}>
                    <Text style={{justifyContent: 'center', color:'#fff'}}>Publicar</Text>
                 </Button>
              </Right>
            </Header>

              <View style={{ flex:1, justifyContent: "flex-start", alignItems: "flex-start", width: "100%", height: 390}}>
                <Form style={{width: "100%", height: 390 }}>
                <Input style={{fontSize: this.state.tInputfontSize, lineHeight: this.state.tInputfontSize, paddingTop: this.state.tInputfontSize - (this.state.tInputfontSize * 0.75), textAlignVertical: "top", width: "100%", } }
                      multiline
                      placeholder="Enter Text Here"
                      onChangeText={this._changeText.bind(this)} 
                      />
                </Form>
              </View>
     </Container>
        );

      }
    }

    const styles = StyleSheet.create({

     topMargin: {
        marginTop: Platform.OS === "ios" ? 0 : Expo.Constants.statusBarHeight,
        backgroundColor: "#00AE91",
        zIndex: -1
      },
     modalFooter: {
        backgroundColor: "white",
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 0.2 },
        shadowOpacity: 0.3,
        shadowRadius: 2,
        height: 54,
        width: "100%",
        justifyContent: "flex-start",
        alignItems: "center",
        padding: 5
      },
    });

    const mapStateToProps = state => ({  posts: state.postReducers, data: state.data });

    const mapDispatchToProps = dispatch =>
          bindActionCreators({  addPostAction }, dispatch);

    export default connect(mapStateToProps,  mapDispatchToProps)(doPost);

顺便说一句，我正在使用EXPO进行测试（可能是EXPO问题？）