如何将简单的按钮导航到其他视图？

Question

我正在尝试从一个视图到另一个视图进行简单的按钮导航（我还不确定这是否称为视图）。

例如我有Featured.js作为

var SearchPage = require('./Search');

class Featured extends Component {
    showSearchPage(){
        console.log('showing search page');
        this.props.navigator.push({
            title: "Search",
            component: SearchPage
        });
    }

    render() {
        return (
           <TouchableHighlight onPress={() => this.showSearchPage()}>
              <View style={styles.row}>
                <Text style={styles.label}>Open Search Page</Text>
              </View>
            </TouchableHighlight>          
        );
    }
}

module.exports = Featured;

然后 Search.js 作为另一个 Class 非常像 Featured.js 。我如何在点击打开 Search.js 视图的视图中创建一个按钮。

目前我正在 "Can not read property push of undefined"。如何定义导航器或有其他简单的导航方式？

注意：我不想制作 TabBar 导航。

Answer 1

所以基本上你有一个应用程序页面，它根据用户操作呈现子视图。首先我建议你使用 state 而不是 props 来做你正在做的事情（它是动态的而不是静态的）。

var SearchPage = require('./Search');
var Initial = require('./Initial');
var AnotherSubView = // ...

class Featured extends Component {
    getInitialState: function() {
        title: "initial",
        component: <Initial/>
        return({title:title, component:component});
    }
    showSearchPage(){
        console.log('showing search page');
        this.setState({
            title: "Search",
            component: <SearchPage/>
        });
    }

    render() {
        var title = this.state.title;
        var component = this.state.component;
        return (<div>
           <TouchableHighlight onPress={() => this.showSearchPage()}>
              <View style={styles.row}>
                <Text style={styles.label}>Open Search Page</Text>
              </View>
            </TouchableHighlight>
            {component}          
        </div>);
    }
}

module.exports = Featured;

使用 getInitialState 加载您的 first/landing 子视图。然后单击更改您的组件。

顺便说一句，道具是未定义的，因为你没有定义它 =p。你应该使用 setProps。无论如何，我认为这不应该继续进行，但所以你知道。

希望对您有所帮助！

如何将简单的按钮导航到其他视图？

How to make simple button navigation to other view?

reactjs

react-native