reagieren-native-modalbox in Kind Komponente Kontext stecken

Ich benutze react-native-modalbox. Nach dem dunkel schattierten Bereich im Bild unten zu urteilen, hängt mein Modell im Kontext der Komponente, in der es sich befindet. Nicht die ganze App. Gibt es eine Möglichkeit, das Modal zu denken, dass es auf der Wurzelkomponentenebene ist? Ich habe versucht zIndex:500, die nicht funktioniert.reagieren-native-modalbox in Kind Komponente Kontext stecken

modal:

Code:

let Categories = (props) => (
    <View style={styles.formItem}> 
    <List style={styles.list} dataArray={props.categories} 
     renderRow={(item) => 
     <ListItem icon onPress={() => props.toggleShowSubcategories(item)}> 
      <Left> 
      <Icon 
       style={styles.icon} 
       name={item.icon} 
       size={20} 
       color={item.iconColor} /> 
      </Left> 
      <Body> 
      <Text style={styles.label}>{item.label}</Text> 
      </Body> 
      <Right> 
      <Icon style={styles.arrow} name="angle-right" size={20} /> 
      </Right> 
     </ListItem> 
     }> 
    </List> 

    <Modal 
     style={[styles.modal, styles.modal3]} 
     position={'center'} 
     isOpen={props.categories.some(x => showModal(x))}> 
     <Text style={styles.text}>Modal centered</Text> 
     <Button 
     onPress={() => props.setAllShowSubcategoriesToFalse()} 
     style={styles.btn}><Text>Close</Text></Button> 
    </Modal> 
    </View> 

) 

Categories.propTypes = { 
    categories: React.PropTypes.array.isRequired, 
    toggleSubcategory: React.PropTypes.func.isRequired, 
    toggleShowSubcategories: React.PropTypes.func.isRequired, 
    setAllShowSubcategoriesToFalse: React.PropTypes.func.isRequired 
} 

Categories = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Categories) 

export default Categories 

const styles = { 
    list: { 
    flex: 1, 
    backgroundColor: '#FFFFFF', 
    borderRadius: 8 
    }, 
    label: { 
    color: '#9E9E9E', 
    fontWeight: '200' 
    }, 
    formItem: { 
    marginBottom: 10 
    }, 
    icon: { 
    width: 30 
    }, 
    header: { 
    backgroundColor: '#F7F7F7', 
    }, 
    arrow: { 
    color: '#9E9E9E' 
    }, 
    modalView: { 
    flex: 1, 
    backgroundColor: '#FFFFFF', 

    borderRadius: 8, 
    }, 
    title: { 
    color: '#9E9E9E', 
    fontWeight: '200' 
    }, 


    wrapper: { 
    paddingTop: 50, 
    flex: 1 
    }, 

    modal: { 
    justifyContent: 'center', 
    alignItems: 'center', 
    zIndex: 500 
    }, 

    modal3: { 
    height: 500, 
    width: 300, 
    backgroundColor: 'red', 
    zIndex: 500 
    }, 

    btn: { 
    margin: 10, 
    backgroundColor: '#3B5998', 
    color: 'white', 
    padding: 10 
    }, 

    btnModal: { 
    position: 'absolute', 
    top: 0, 
    right: 0, 
    width: 50, 
    height: 50, 
    backgroundColor: 'transparent' 
    }, 

    text: { 
    color: 'black', 
    fontSize: 22 
    } 
}

Quelle

2017-04-24 BeniaminoBaggins

Die übergeordnete Ansicht hat den Stil 'FormItem', die nur Styling ist, ist 'Margin: 10'. Es gibt nichts, was dieser Ansicht sagt, dass sie den gesamten Bildschirm ausfüllt, so dass sie so groß ist, dass sie zu ihren Kindern passt. Geben Sie der Ansicht den 'absoluteFill'-Stil, so dass, wenn der Bildschirm https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native

Quelle

2017-04-24 12:55:13 reggie3

ausgefüllt wird Danke. Das gibt es nur "Position: absolut" Es funktioniert nicht. – BeniaminoBaggins

Es könnte sich lohnen, ein Beispiel für Ihr Problem in https://snack.expo.io/ zu setzen, das wie jsfiddle für React ist. Auf diese Weise könnte eine Person mit Ihrem Code spielen, um zu versuchen, dass es funktioniert. – reggie3

reagieren-native-modalbox in Kind Komponente Kontext stecken

Antwort

Verwandte Themen