反應原生 - 在按鈕按下加載整個屏幕與父組件

我想從按鈕按下加載我的父組件從子組件。但它不是從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;

請不要讓我知道，如果你需要更多的信息。

來源

2017-10-20 Ashutosh Singh

那裏有AppRegistry的原因是什麼？你也可能需要它的聲音導航庫 – linasmnew

@linasmnew我一直認爲它會工作。 –

你想從這個組件導航到父組件？ – linasmnew

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

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

****不是最好的解決方案，玩耍，你會得到最好的

來源

2017-10-20 11:00:17

如何在全局範圍內定義'component1, component2'？ –

這2個可以是功能組件或類組件（與我定義的App類相同 –

從這個組件導航到你的父組件，除非你想實現你的不建議使用自己的導航，您應該查看已經構建並由反應原生態系統中的許多人採用的導航。

一些最大的國家：

我個人強烈建議選擇1號，因爲它似乎是最產品測試及生產在那裏準備好實施

來源

2017-10-20 11:00:34 linasmnew

反應原生 - 在按鈕按下加載整個屏幕與父組件

回答

相關問題