reactjs - 如何制作简单的按钮导航到其他 View ？

Question

我正在尝试制作从一个 View 到另一个 View 的简单按钮导航(我还不确定这是否称为 View )。

例如我有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。如何在 View 中创建一个按钮，点击即可打开 Search.js View 。

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

注意:我不想进行 TabBar 导航。

Answer 1

所以基本上你有一个应用程序页面，它根据用户操作呈现任一 subview 。首先，我建议您使用状态而不是 Prop 来完成您正在做的事情(它是动态的而不是静态的)。

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 加载您的第一个/着陆 subview 。然后单击更改您的组件。

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

希望对你有帮助!