是否有更好或更优雅的方式在React Native中有条件地呈现不同的组件?

Question

我是React Native的新手，我正在尝试创建一个带有自定义导航栏的应用程序，当你点击链接时，它会在页面之间跳转。

这是我的代码的缩写版本:

class App extends Component {
constructor(props) {
super(props);
this.state = {
dicePage: true,
itemsPage: false
}
}
dicePress = () => {
this.setState({
dicePage: true,
itemsPage: false
})
}
itemsPress = () => {
this.setState({
dicePage: false,
itemsPage: true
})
}
render() {
return (
<View style={styles.container}>
<ImageBackground source={backgroundTile} style={styles.bgImage}>
<View style={styles.content}>
<View style={styles.logoContainer}>
<Image source={require('./assets/images/Logo.png')} style={styles.logo} />
</View>
{this.state.dicePage && <DicePage />}
{this.state.itemsPage && <ItemsPage />}


<NavBar value='Dice' dicePress={this.dicePress} itemsPress={this.itemsPress} />
</View>
</ImageBackground>
</View>    
);
}
}
export default App;

和

class NavBar extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.bottomNav}>
<TouchableOpacity onPress={this.props.dicePress}>
<Text key='dice' style={styles.nav}>Dice</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.props.itemsPress}>
<Text key='items' style={styles.nav}>Items</Text>
</TouchableOpacity>
</View>
)
}
}
export default NavBar;

所以当我测试应用程序时，这是有效的-我将有4或5个页面，所以想要比三元运算符等更多的选项-但我认为可能有一个更好或更优雅的方法来做到这一点。

我尝试过React Navigator和其他东西，但我真的在寻找最简单的方法来实现这一点(希望使用DRY编码，因为重复对我来说是错误的)。我应该为此映射链接和函数吗?我想我以前从来没有映射过函数，并且意识到可能应该有一个适用于所有函数的单一适应性函数。

谢谢你的建议!

Answer 1

第一种方法

您可以创建一个pages对象，其中每个键是页面的标识符，每个对应的值是表示页面的组件:

const pages = {
dicePage: DicePage,
itemsPage: ItemsPage
};

这样我们就可以只根据键来决定应该呈现什么，并且所有的导航链接都可以共享相同的onPress处理程序。

App.js

class App extends Component {
constructor(props) {
super(props);
this.state = {
currentPage: "dicePage" // Default page
};
}
pagePress = (pageName) => {
this.setState({ currentPage: pageName });
};
render() {
const Page = pages[this.state.currentPage]; // What page should be rendered (based on the `currentPage` key)
return (
<View>
<View>
<Page />
<NavBar value="Dice" pagePress={this.pagePress} />
</View>
</View>
);
}
}

Navbar.js

class NavBar extends Component {
render() {
return (
<View>
<TouchableOpacity onPress={() => this.props.pagePress("dicePage")}>
<Text key="dice">Dice</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.pagePress("itemsPage")}>
<Text key="items">Items</Text>
</TouchableOpacity>
</View>
);
}
}

所以如果你想用更多的页面来扩展它，你只需要添加键值对到pages对象和链接到Navbar。

我已经删除了一些东西，如样式和图像简化的例子。

第二种方法

const pages = [
{ key: "dicePage", page: DicePage, pageLinkName: "Dice" },
{ key: "itemsPage", page: ItemsPage, pageLinkName: "Items" },
];
class NavBar extends Component {
render() {
return (
<View>
{pages.map((page) => {
return (
<TouchableOpacity
onPress={() => this.props.pagePress(page.key)}
key={page.key}
>
<Text>{page.pageLinkName}</Text>
</TouchableOpacity>
);
})}
</View>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
currentPage: "dicePage", // Default page
};
}
pagePress = (pageName) => {
this.setState({ currentPage: pageName });
};
render() {
const Page = pages.filter((page) => page.key === this.state.currentPage)[0]
.page;
return (
<View>
<View>
<Page />
<NavBar value="Dice" pagePress={this.pagePress} />
</View>
</View>
);
}
}

基本上是相同的方法，但pages的结构发生了变化，您现在也不需要手动添加新的链接，但您只需要向pages添加新的对象，现在是一个数组。