如何使用 TabView 在 React Native 中单击文本的下一个选项卡？

Question

我是 React Native 的新手。我在我的项目中使用 TabView [react-native-tab-view - npm]。我声明了一个用于渲染屏幕的常量，例如：

const renderScene = SceneMap({
      signin: Sign_in,
       signup: Sign_up,
  });

当点击文本时，我想跳转到下一个选项卡并编写如下代码：

<Text style={style.signup_text} onPress={() => { this.props.jumpTo('signup') }}>Sing Up</Text>

它工作正常但是当我更改我的代码以将导航属性传递给该选项卡的 class 而不是它不工作时。代码如下：

const renderScene = SceneMap({
        signin: () => <Sign_in navigation={navigation} />,
        signup: () => <Sign_up navigation={navigation}  />,
    });

现在我怎样才能移动到下一个选项卡。使用上面的代码 jumpTo 不起作用。我希望你能理解我想解释的内容。

Answer 1

如果您想将自定义道具发送到组件，您必须将 renderScene 更改为

const renderScene = (props) => {
    switch (props.route.key) {
      case 'signin':
        return <Sign_in {...props} {...{navigation}} />;
      case 'signup':
        return <Sign_un {...props} {...{navigation}}/>;
      default:
        return null;
    }
  }

Answer 2

使用TabView的ref，使用jumpToIndex(index)后

const [tabView, setTabView] = useState(null);

<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
ref={(tabView) => {
    setTabView(tabView);
}}
renderTabBar={renderTabBar}
initialLayout={{ width: layout.width }}
/>

<Button onPress={()=>{tabView.jumpToIndex(3);} />

如何使用 TabView 在 React Native 中单击文本的下一个选项卡？

How to move in next tab on text click in React Native using TabView?

react-native

navigation

tabview