javascript - 如何在React Native中调用带有来自另一个类的参数的函数？

Question

我想在一个屏幕中显示 Side_Drawer 上列出的不同屏幕。我不想为每个屏幕创建相同的布局更改，因此当用户单击列表时，屏幕的中心部分会相应更改，而其他布局将保持不变。

这是我的屏幕 A，其中内容随着状态中索引的变化而变化。

   class ScreenA extends Component {
      constructor(props) {
        super(props)
        this.state = { index: 0 }; // default screen index
      }
          switchScreen(index) {
            this.setState({ index: index })
          }
      render() {
        let AppScreen = null;

        if (this.state.index == 0) {
          AppScreen = Screen1
        } else if (this.state.index == 1) {
          AppScreen = Screen2
        } else if (this.state.index == 2) {
          AppScreen = ScreenC        }

        return (
          <Drawer ref={(ref) => { this.drawer = ref; }}
            content={<Side_Drawer navigator={this.navigator} />}
            onClose={() => this.closeDrawer()} >
             <Container>    
             <Button
                onPress={() => this.switchScreen(1)}/>

<AppScreen />
             <Containert/>        
            </Drawer>  
        );
      }
    }

这是我的 Side_Drawer，它是 ScreenA 抽屉上的列表，我想从中更改屏幕 A 的 switchScreen 函数的索引和我想要显示屏幕 C 的列表的 onPress。

class Side_Drawer extends Component {
  render() {
    return (
      <Container>
        <Content>
            <ListItem  >
              <Text onPress={()=>this.props.navigation.navigate('ScreenC')}>Goto Screen C</Text>
            </ListItem>
        </Content>
      </Container>
    );
  }
}

module.exports = withNavigation(Side_Drawer);

我想要一个单屏应用程序，其中只有屏幕所需的部分会发生变化，其他部分都相同。

Answer 1

传递要使用的参数。

您可以将其移至侧面菜单，因为您有屏幕数据要移至 AppScreen。

content={<Side_Drawer navigator={this.navigator} move={AppScreen} />}

Side_Drawer强文字

<Text onPress={()=>this.props.navigation.navigate(this.props.move)}>