React Native - 平台无关的选项卡导航方法
React Native - Platform-Independent Tab Navigation Method
我学习了一个应用有趣的 Tabs Navigation 的教程,基本上它安装和使用 react-native-tabs
npm 并允许 React Native 应用程序使用 Tab
在 Android 和 IOS 平台中可以是 运行 的组件。
教程Link的应用很简单,标签就像一个按钮一样简单,可以改变页面本身的Text
内容。
我一直在寻找使用此 react-native-tabs
npm 将来自其他 Javascript 文件的屏幕插入选项卡的方法,但没有与此相关的方法。
我的问题:
是不是这个react-native-tabs
npm 有不能在选项卡中指定另一个 JaveScript 文件屏幕的限制?
任何人都可以告诉我如何使用 react-native-tabs
npm 指定选项卡以显示来自其他 Javascript 文件的特定屏幕?谢谢。
教程Link:https://differential.com/insights/sharing-code-between-android-and-ios-in-react-native/
import Tabs from 'react-native-tabs';
class ApplicationTabs extends Component{
constructor(props) {
super(props);
this.state = {
page: 'first'
};
}
render() {
const { page } = this.state;
const tabbarStyles = [styles.tabbar];
if (Platform.OS === 'android') tabbarStyles.push(styles.androidTabbar);
return (
<View style={styles.container}>
<Tabs
selected={page}
style={tabbarStyles}
selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}
>
<Text name="first">First</Text>
<Text name="second">Second</Text>
<Text name="third">Third</Text>
</Tabs>
<Text>CodeSharing App</Text>
<Text>{page}</Text>
</View>
)
}
}
屏幕输出(选项卡导航仅导航到更改屏幕上的文本)
react-native-tabs npm
可能不适合我。相反,我使用了 react-navigation npm
,结果工作正常。唯一的问题是到目前为止我只能实现 StackNavigation。
Github: https://github.com/slnn3r/RecipeRedux.git
上面的项目:
- 正在使用 Redux 架构
- 使用 PHP mySQL 数据库
- 使用堆栈导航
我学习了一个应用有趣的 Tabs Navigation 的教程,基本上它安装和使用 react-native-tabs
npm 并允许 React Native 应用程序使用 Tab
在 Android 和 IOS 平台中可以是 运行 的组件。
教程Link的应用很简单,标签就像一个按钮一样简单,可以改变页面本身的Text
内容。
我一直在寻找使用此 react-native-tabs
npm 将来自其他 Javascript 文件的屏幕插入选项卡的方法,但没有与此相关的方法。
我的问题:
是不是这个react-native-tabs
npm 有不能在选项卡中指定另一个 JaveScript 文件屏幕的限制?
任何人都可以告诉我如何使用 react-native-tabs
npm 指定选项卡以显示来自其他 Javascript 文件的特定屏幕?谢谢。
教程Link:https://differential.com/insights/sharing-code-between-android-and-ios-in-react-native/
import Tabs from 'react-native-tabs';
class ApplicationTabs extends Component{
constructor(props) {
super(props);
this.state = {
page: 'first'
};
}
render() {
const { page } = this.state;
const tabbarStyles = [styles.tabbar];
if (Platform.OS === 'android') tabbarStyles.push(styles.androidTabbar);
return (
<View style={styles.container}>
<Tabs
selected={page}
style={tabbarStyles}
selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}
>
<Text name="first">First</Text>
<Text name="second">Second</Text>
<Text name="third">Third</Text>
</Tabs>
<Text>CodeSharing App</Text>
<Text>{page}</Text>
</View>
)
}
}
屏幕输出(选项卡导航仅导航到更改屏幕上的文本)
react-native-tabs npm
可能不适合我。相反,我使用了 react-navigation npm
,结果工作正常。唯一的问题是到目前为止我只能实现 StackNavigation。
Github: https://github.com/slnn3r/RecipeRedux.git
上面的项目:
- 正在使用 Redux 架构
- 使用 PHP mySQL 数据库
- 使用堆栈导航