일부 TextInput 또는 StatusBar 속성이 Android에서 작동하지 않는 이유는 무엇입니까?

Question

나는 가장 단순한 React Native 앱인 안드로이드 버전으로 고심하고 있습니다. Android와 같은 부분은 <StatusBar />에있는 translucent이며 가장 성가신 일로 multiline과 underlineColorAndroid 인 부분은 <TextInput />입니다. 이 iOS의 모습이이

<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-with-text

을 그리고 이것은 안드로이드에 엉망입니다 : 당신이 할 수 android-with-text

어떤 이유인지는 모르겠지만) a) TextInput 대신 화면 상단에 텍스트를 그립니다. b) 줄 바꿈을하지 않고 한 줄에 모든 단어를 겹칩니다.소품은 있지만 소용이 없음), 그리고 с)는 여전히 흰색 밑줄을 보여줍니다. 안드로이드의 자리 표시 자 상태는 괜찮은 것처럼 보입니다. (자리 표시자가 있어야하고 줄 바꿈이 있어야 함).

내 첫 번째 RN 앱이며 프로젝트를 설정하기 위해 create-react-native-app를 사용했습니다.

반응 네이티브-CLI : 2.0.1 반응 네이티브 : 0.47.2

어떤 조언을 많이 주시면 감사하겠습니다을!

UPD : lineHeight: 1이 문제의 절반을 초래했습니다 (비록 translucent과 underlineColorAndroid의 문제는 확실하지 않음). NTS : 결코 당신의 웹 ReactJS app에서 당신의 스타일을 맹목적으로 복사하여 복사하십시오.

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, 
},