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);

现在在你的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 个答案: