反应原生 - 在按钮按下加载整个屏幕与父组件

我想从按钮按下加载我的父组件从子组件。但它不是从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

反应原生 - 在按钮按下加载整个屏幕与父组件

回答

相关问题