react-native-modalbox가 하위 구성 요소 컨텍스트에 고정되었습니다.

저는 react-native-modalbox을 사용하고 있습니다. 아래 이미지의 어두운 음영 영역으로 판단하면 내 모델은 내부에있는 구성 요소의 컨텍스트에 고정되어 있습니다. 전체 앱이 아닙니다. 모달이 루트 구성 요소 레벨에 있다고 생각하게하는 방법이 있습니까? 나는 작동하지 않는 zIndex:500을 시도했다.react-native-modalbox가 하위 구성 요소 컨텍스트에 고정되었습니다.

모달 :

코드 :

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

출처

2017-04-24 BeniaminoBaggins

부모 뷰 스타일 'FormItem의'유일한 스타일이없는거야 'marginBottom : 10'. 화면 전체를 채우기 위해 뷰를 말하면서 아이에게 맞게 크기가 조정됩니다. 보기에 'absoluteFill'스타일을 지정하여 화면을 가득 채울 수 있도록하십시오. https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native

출처

2017-04-24 12:55:13 reggie3

감사합니다. 그것은 단지 그것을'position : absolute'로 제공합니다. 작동하지 않습니다. – BeniaminoBaggins

문제의 예제를 https://snack.expo.io/에 넣을만한 가치가 있습니다. React는 jsfiddle와 같습니다. 그렇게하면 사람이 코드를 사용하여 작동하도록 할 수 있습니다. – reggie3

react-native-modalbox가 하위 구성 요소 컨텍스트에 고정되었습니다.

답변

관련 문제