Có thể gọi một hàm trong một thành phần gốc trong React Native không?

Question

Tôi vẫn còn rất mới đối với React Native, và tôi nghĩ câu hỏi này là một sự hiểu lầm cơ bản về React.

Tôi đang cố mở một phương thức từ báo chí của nút NavigationBar. Cả hai thành phần tùy chỉnh tôi đang sử dụng ("phản ứng-bản địa-phương thức-picker") và React Native Modal sử dụng các thành phần con để kích hoạt sự kiện. Tôi không thể tìm ra cách để mở các phương thức từ báo chí của các rightButton prop.

<ModalPicker 
    data = {[ 
     {key: '1', label: '1'}, 
     {key: '2', label: '2'}, 
     {key: '3', label: '3'} 
    ]} 
    initValue = 'Select option' 
    selectStyle={{ 
     height: 200 
    }}> 
    <NavigationBar 
     title={{ title: "ModalTest" }} 
     rightButton={{ title: "Open Modal" 
     handler:() => ModalPicker.open() }} 
    /> 
</ModalPicker> 

Tôi đang cố gắng để xác định xem tôi có thể gọi open(), một chức năng của các thành phần ModalPicker từ "rightButton" prop của các thành phần Navigationbar.

Thành phần cho ModalPicker không có chức năng mở và hoạt động khi tôi tạo TouchableHighlight một đứa trẻ, nhưng làm cách nào để gọi hàm từ bên trong một đạo cụ thành phần con?

Đây là thành phần chính của ứng dụng.

Answer 1

Bạn có thể sử dụng ref='picker' cho thành phần cha mẹ của bạn và gọi nó bằng this.refs.picker

<ModalPicker 
    data = {[ 
     {key: '1', label: '1'}, 
     {key: '2', label: '2'}, 
     {key: '3', label: '3'} 
    ]} 
    ref='picker' 
    initValue = 'Select option' 
    selectStyle={{ 
     height: 200 
    }}> 
    <NavigationBar 
     title={{ title: "ModalTest" }} 
     rightButton={{ title: "Open Modal", 
     handler:() => this.refs.picker.open() }} 
    /> 
</ModalPicker>