从 header 中的按钮导航到屏幕

Question

我已经使用 react-navigation:

设置了一个基本的 header

class HeaderRight extends Component {

  navigateToScreen() {
     // Navigate to different screen
  }

  render() {
    return (
    <View style={{marginTop: 22}}>
        <TouchableHighlight onPress={() => {
          this.navigateToScreen(true)
        }}>
          <Image source={require('../images/home-icon.png')}  style={{width: 30, height: 30}} />
        </TouchableHighlight>

    </View>
    );
  }
}

当我单击图像时，如何打开另一个从屏幕左侧开始动画的屏幕？

Answer 1

navigateToScreen()
{
  this.props.navigator.push({ transitionType : 'PushFromRight', id : 'YOUR SCREEN ID' });
}
render() {
    return (
    <View style={{marginTop: 22}}>
        <TouchableHighlight onPress={() => this.navigateToScreen()}>
          <Image source={require('../images/home-icon.png')}  style={{width: 30, height: 30}} />
        </TouchableHighlight>
    </View>
    );
  }

这里我使用了 android 的 Navigator。并且已经为所有屏幕设置了导航器 ID，因此首先您必须为您的屏幕设置该 ID

谢谢。

从 header 中的按钮导航到屏幕

navigate to screen from button in header

react-native

react-navigation