我尝试在 react-native 中重新创建这个应用程序:
但是我没有任何制作红色组件的线索。 我在互联网上搜索并找到了 react-navigation V5,但它看起来很复杂。
我还想创建一个水平的 ScrollView
,每次我点击新的“页面”时,都会重新呈现所有当前 View 。但这是一个好方法吗?
感谢您的回答。
最佳答案
我喜欢@mainak 关于使用react-native-tab-view
的建议。为了补充这个答案,我做了一个简单的实现来做你想要的。
首先安装库:yarn add react-native-tab-view
或 npm i react-native-tab-view --save
。
然后你可以这样做:
// ...
import {TabView, SceneMap, TabBar} from 'react-native-tab-view';
// ...
const initialLayout = {width: Dimensions.get('window').width};
const renderTabBar = (props) => (
<TabBar
{...props}
tabStyle={{width: 120}}
scrollEnabled={true}
indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}
/>
);
const App = () => {
// ...
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{key: 'first', title: 'First'},
{key: 'second', title: 'Second'},
{key: 'third', title: 'Third'},
{key: 'fourth', title: 'Fourth'},
{key: 'fifth', title: 'Fifth'},
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
fourth: FourthRoute,
fifth: FifthRoute,
});
return (
<TabView
navigationState={{index, routes}}
renderTabBar={renderTabBar}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
};
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
我已经定义了名为 FirstRoute
、SecondRoute
等的 View 组件...但是请将其更改为您希望在选项卡栏中显示的屏幕。
这里的关键部分是 renderTabBar
,传递给 TabView
组件的自定义 TabBar
组件。在 TabBar
组件上,我们有一个名为 scrollEnabled
的选项,如果设置为 true,则允许我们根据选项卡 View 和选项卡的大小从左向右滚动栏.
我为每个选项卡定义了 120
的宽度,但您可能希望根据选项卡标签的大小来调整这个值。
您引用的 Activity 标签栏下方的红色突出显示称为指示器,可以使用 indicatorStyle
属性设置样式:
indicatorStyle={{backgroundColor: 'white', height: 5, borderRadius: 10}}
有关更多信息,请查看 github 页面上的文档:https://github.com/satya164/react-native-tab-view .
关于android - 在 React Native 中制作 slider 导航的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63050081/