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

【问题标题】：react native - On button press load the whole screen with parent component反应原生 - 按下按钮加载整个屏幕与父组件
【发布时间】：2017-10-20 10:29:11
【问题描述】：

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

如果您需要更多信息，请告诉我。

【问题讨论】：

那里有 AppRegistry 的原因是什么？听上去你可能还需要一个导航库
@linasmnew 我一直认为它会起作用。
你想从这个组件导航到父组件？
@linasmnew 是的！

标签： javascript reactjs mobile react-native

【解决方案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/>
}
}

**** 不是可用的最佳解决方案，多玩一玩，你会得到最好的

【讨论】：

如何全局定义component1, component2？
这两个可以只是功能组件或类组件（与我定义App类的方式相同

【解决方案2】：

要从这个组件导航到你的父组件，除非你想实现自己的导航，这是不推荐的，你应该研究一个已经在 react-native 生态系统中被许多人构建和采用的导航。

一些最大的：

我个人强烈推荐选项 1，因为它似乎是最受生产测试和生产就绪的实现

【讨论】：