reagieren nativ: Ansicht nicht in Android angezeigt

Question

Ich habe eine Kopfzeile, die Komponente enthalten. Dieser Header sollte Schatten in Android und iOS haben. Es ist Arbeit auf iOS, aber nichts in Android zeigen.

class Toolbar extends Component { 

    render() { 
    return (
     <View style={[styles.toolBar, this.props.style]}> 
     {this.props.children} 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    toolBar: { 
    zIndex: 1, 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    height: topBarHeight, 
    backgroundColor: colors.base, 
    elevation: 5, 
    shadowOpacity: 0.3, 
    shadowRadius: 1, 
    shadowOffset: { 
     height: 2, 
     width: 0 
    } 
    } 
}); 

Answer 1

Wie in den documentation angegeben, Schatten Props (shadowColor, shadowOffset, shadowOpacity und shadowRadius) funktioniert nur in iOS.

Answer 2

Sie sollten zIndex und Elevation nicht in einem Stil verwenden, wenn Sie die Ansicht nicht gezeigt. Setzen Sie zIndex für Android auf Null.

zIndex: (Platform.OS == 'ios') ? 1 : 0