本機反應-按下按鈕時，使用父組件加載整個屏幕

Question

我試圖在按下按鈕時從子組件加載我的父組件。 但這不是從btnPress方法呈現父組件。 我沒有任何錯誤。

onButtonPress

<Button onPress={() => btnPress(parent_id, id)}>
                <Icon name="arrow-forward" />
</Button>

btnPress功能

function btnPress(parent_id, id) {
       const App = () => (
         //I have tried this way but this didn't work. No any error, i can see log on console
         <Container> 
           <Headerc headerText={'Fitness sdaf'} />
           <ExerciseList pId={parent_id} mId={id} />
         </Container>
       );  
         console.log(id);  
        AppRegistry.registerComponent('weightTraining', () => App);
    }

完整代碼（子組件）

import React from 'react'; 
import { Right, Body, Thumbnail, Container, ListItem, Text, Icon } from 'native-base';
import { AppRegistry
} from 'react-native';
import Headerc from './headerc';
import ExerciseList from './exerciseList';

import Button from './Button';


const ExerciseDetail = ({ exercise }) => {
  const { menu_name, menu_icon, parent_id, id } = exercise;

function NumberDescriber() {
      let description;
      if (menu_icon === 'noimg.jpg') {
        description = `http://www.xxxxxx.com/uploads/icons/${menu_icon}`;
      } else if (menu_icon === 'noimg.jpg') {
        description = menu_icon;
      } else {
        description = `http://www.xxxxx.com/uploads/icons/${menu_icon}`;
      }
  return description;
}

function btnPress(parent_id, id) {
   const App = () => (
     <Container>
       <Headerc headerText={'Fitness sdaf'} />
       <ExerciseList pId={parent_id} mId={id} />
     </Container>
   );

     console.log('-------------------------------');
       console.log(id); 
       console.log('+++++++++++++++++++++++++++');
    AppRegistry.registerComponent('weightTraining', () => App);
}

return (
  <ListItem>
    <Thumbnail square size={80} source={{ uri: NumberDescriber() }} />
    <Body>
      <Text>{menu_name}</Text>
      <Text note> {menu_name} exercise lists</Text>
    </Body>
    <Right>
    <Button onPress={() => btnPress(parent_id, id)}>
        <Icon name="arrow-forward" />
    </Button>
    </Right>
  </ListItem>

  );
 }; 

export default ExerciseDetail;

如果您需要更多信息，請告訴我。

Answer 1

我不建議這樣做，它看起來完全是反模式的，而不是。 最好嘗試導航或創建這樣的模式

在index.js或index.android.js或index.ios.js中

import App from './App'    //your app level file
AppRegistry.registerComponent('weightTraining', () => App);

現在在您的應用js文件中

export default App class extends React.Component{
 constructor(props){
   super(props);
   this.state ={
    component1:false,
    component2:true,  
  }
 }

btnPressed =()=>{
//handle state update logic here
}
render(){
  if(this.state.component1) return <Component1/>
  return <Component2/>
}
}

****不是最好的解決方案，隨便玩吧，您會得到最好的

Answer 2

要從該組件導航到父組件，除非您不希望實現自己的導航（不建議這樣做），您應該研究一下本機生態系統中許多人已經構建並采用的導航。

一些最大的：

我個人強烈建議選擇選項1，因為它似乎是經過最多生產測試和生產准備的實施

本機反應-按下按鈕時，使用父組件加載整個屏幕

問題描述

2 個解決方案

解決方案1
0 2017-10-20 11:00:17

解決方案2
0 2017-10-20 11:00:34

本機反應-按下按鈕時，使用父組件加載整個屏幕

問題描述

2 個解決方案

解決方案1 0 2017-10-20 11:00:17

解決方案2 0 2017-10-20 11:00:34

解決方案1
0 2017-10-20 11:00:17

解決方案2
0 2017-10-20 11:00:34