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

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 作为另一个非常类似于 Featured.js 的类。如何在点击打开 Search.js 视图的视图中创建一个按钮。

目前我收到“无法读取未定义的属性推送”。 如何定义导航器或有其他简单的导航方式？

注意：我不想制作 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 加载您的第一个/登陆子视图。然后单击更改您的组件。

顺便说一下，道具是未定义的，因为你没有定义它=p。你应该使用 setProps。无论如何，我认为这是不正确的，但你知道的。

希望对你有帮助！