TextInputまたはStatusBarのプロパティの一部がAndroidで動作しないのはなぜですか？

Question

私は今までに一番簡単なReact NativeアプリのAndroid版で苦労しています。 Androidのように見えますが、<StatusBar />のtranslucentの中のいくつかの小道具を無視し、最も厄介なことにmultilineとunderlineColorAndroidを<TextInput />に入れます。

は、ここでのコードですが、それはかなり簡単です：

<View style={[styles.main, {backgroundColor: background_color}]} > 
    <StatusBar 
    barStyle="light-content" 
    translucent={true} /> 

    <View style={[styles.header, {backgroundColor: background_color}]}> 
     <Button name='clear' disable={this.state.text} action={this.clearInput} /> 
     <Button name='run' disable={this.state.text} action={this.openFullScreen}/> 
    </View> 

    { 
     this.state.fontLoaded ? (
      <TextInput 
      style={styles.input} 
      ref='input' 
      onChangeText={(text) => this.setState({text: text})} 
      placeholder={this.state.placeholder} 
      value={this.state.text} 
      multiline={true} 
      placeholderTextColor={placeholder_color} 
      returnKeyType='done' 
      blurOnSubmit={true} 
      numberOfLines={5} 
      autocorrect={false} 
      underlineColorAndroid='transparent' /> 
      ) : null 
    } 
</View> 

const styles = StyleSheet.create({ 
main: { 
    flex: 1, 
    display: 'flex', 
    flexDirection: 'column', 
    alignItems: 'center', 
    justifyContent: 'flex-start' 
    }, 

header: { 
    height: 88, 
    width: '100%', 
    display: 'flex', 
    flexDirection: 'row', 
    alignItems: 'center', 
    justifyContent: 'space-between' 
    }, 

input: { 
    width: '94%', 
    flex: 1, 

    fontSize: 50, 
    lineHeight: 1, 
    fontFamily: 'Roboto', 
    fontStyle: 'normal', 
    fontWeight: '900', 
    color: '#ffffff', 

    overflow: 'hidden', 
    textAlignVertical: "top", 
    //lame fix for Android 
    //paddingTop: Platform.OS == 'android' ? 40 : 0, 
}, 
}); 

これは、それがiOSのように見えるものです： iOS-with-text

そして、これは、Android上の混乱である：android-with-text

することができますように何らかの理由でa）TextInputの代わりに画面上部にテキストを描画し、b）改行せず、1行だけすべての単語をオーバーラップさせます（BTWは012を変更しようとしましたが役立つが役に立たない）、そしてс）はまだ白い下線を示している。 Android上のプレースホルダ状態はうまく見えます（プレースホルダは正しい位置にあり、改行があることを意味します）。

これは私の最初のRNアプリで、プロジェクトを設定するためにcreate-react-native-appを使用しました。

反応ネイティブ-CLI：2.0.1 が反応し、ネイティブ：0.47.2

何かアドバイスをいただければ幸いです！

UPD：lineHeight: 1は問題の半分を引き起こしました（translucentとunderlineColorAndroidの問題は何ですか）。 NTS：あなたのウェブReactJSアプリから盲目的にあなたのスタイルをコピーしてコピーすることはありません。

Answer 1

いくつかのもの。複数行では折り返しを有効にするには不十分です。また、numberOfLinesを小道具として使用する必要があります。

また、あなたの問題は、TextInputまたはTextInputを囲むフレックスの高さにすぎないと思います。

最後に、あなたのスタイルのヘッダービューには、トップアトリビュートかビューアブソリュートのいずれかが含まれている可能性があります。

これで解決しない場合は、スタイルを投稿してください。

編集：これらのスタイルのうちのいくつかは、高さを乱している可能性があります。

input: { 
    width: '94%', 
    flex: 1, 
    height: 60, //-> Add this to make sure the text has a height instead of flex 
    //fontSize: 50, -> This is huge, the text might not be able to show entirely. 
    //lineHeight: 1, -> Line height is not the amount of lines. Is the size. It should be around the font size, so either remove it or try setting this value to 50 like the font size. 
    fontFamily: 'Roboto', 
    fontStyle: 'normal', 
    fontWeight: '900', 
    color: '#ffffff', 

    //overflow: 'hidden', -> This might be messing with the header 
    textAlignVertical: "top", 
    //lame fix for Android 
    //paddingTop: Platform.OS == 'android' ? 40 : 0, 
},