我想在React-Native中实现一个Mini View或Floating View,该Mini View或Floating View应该一直保存或打开,直到我们关闭它为止;如果我们导航到其他屏幕对此有任何想法,则应该保持打开状态。
最佳答案
有2种方法可以执行。
MiniView
或者,您可以像这样制作自己的自定义组件
import React, { Component } from "react"
import { StatusBar, View, StyleSheet, Alert, FlatList, TextInput, Button, Image, SafeAreaView, Animated } from "react-native"
import { connect } from "react-redux"
import Alertable from "app/components/Alert/Alert"
import { AlertActions, NavigationActions, UserActions, OrderActions, } from "app/store/actions"
import Style from 'app/style'
import handShake from 'app/assets/img/handShake.png'
import route from 'app/assets/img/route.png'
import endDay from 'app/assets/img/end-day.png'
import { DashboardButton, Navigation } from 'app/components'
import FA from 'react-native-vector-icons/FontAwesome5'
const AnimatedIcon = Animated.createAnimatedComponent(FA)
let connectProps = {
...AlertActions,
...NavigationActions,
...UserActions,
...OrderActions,
}
let connectState = state => ({
menuStatus: state.User.meta,
StartDayStatus: state.User.current,
})
let enhancer = connect(
connectState,
connectProps
)
const buttonsArr = [
{
id: 1,
img: handShake,
title: 'Start Day'
},
{
id: 2,
img: route,
title: 'Planned Route'
},
{
id: 3,
img: endDay,
title: 'End Day'
}
]
class DashboardScreen extends Component {
animVal = new Animated.Value(0);
// initialize animated value to use for animation, whereas initial value is zero
interpolateHeight = this.animVal.interpolate({ outputRange: ['100%', '24%'], inputRange: [0, 1], })
// initialize interpolation to control the output value that will be passed on styles
// since we will animate both search bar and icon. we need to initialize both
// on icon we will animate the scale whereas outputRange starts at 0 end in 1
// on search bar we will animate width. whereas outputRange starts at 100% end in 90%
animatedTransition = Animated.spring(this.animVal, { toValue: 1 })
// we use spring to make the animation bouncy . and it will animate to Value 1
clickAnimate = () => {
this.animatedTransition.start()
}
componentDidMount() {
this.props.saveNavigation(this.props.navigation)
}
buttonPressed(title) {
let startDayStatus = this.props.StartDayStatus.toJS().startUserDay
switch (title) {
case 'Planned Route':
this.props.resetStates()
if (!startDayStatus) {
alert("Start your day first!")
break
}
this.props.navigation.navigate("routeIndexScreen")
break
case 'Start Day':
this.props.startUserDay(true)
if (startDayStatus) break
this.props.resetStates()
this.props.navigation.navigate("routeIndexScreen")
break
case 'End Day':
if (startDayStatus)
this.askToEnd()
break
default:
this.props.startUserDay(false)
}
}
askToEnd() {
Alert.alert(
"Are you sure",
`You want to "End day"`,
[
{ text: "Yes", onPress: () => this.props.startUserDay(false) },
{
text: "No",
style: "cancel"
},
],
{ cancelable: false }
);
}
renderItem({ item }) {
let StartDayStatus = this.props.StartDayStatus.toJS().startUserDay
return (
<DashboardButton
img={item.img}
title={item.title}
showOpacity={StartDayStatus && item.title === 'Start Day' || !StartDayStatus && item.title === 'End Day'}
buttonPressed={this.buttonPressed.bind(this)}
/>
)
}
render() {
return (
<Navigation navigation={this.props.navigation} style={{ backgroundColor: '#fff' }}>
<StatusBar barStyle="light-content" />
<Navigation.Top
menu
title={'Dashboard'}
navigation={this.props.navigation}
/>
<View style={styles.container}>
<Button title='animate icon' onPress={this.clickAnimate} />
<View style={styles.search}>
<Animated.View style={{ height: this.interpolateHeight, }}>
<View style={{ height: '100%', minHeight: 200, width: 400, backgroundColor: 'red', marginBottom: 200 }}>
<Image
source={endDay}
style={{ height: '100%', width: '100%',resizeMode:'contain' }}
/>
</View>
</Animated.View>
</View>
{/* <View style={styles.buttonContainer}>
<FlatList
data={buttonsArr}
showsVerticalScrollIndicator={false}
renderItem={this.renderItem.bind(this)}
keyExtractor={(item) => item.id.toString()}
contentContainerStyle={{ paddingBottom: 50 }}
/>
</View> */}
</View>
</Navigation>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'gray'
},
imageContainer: {
width: Style.DEVICE_WIDTH,
height: Style.DEVICE_HEIGHT / 3.6,
position: 'absolute',
top: 0,
flex: 1,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
},
menuButton: {
height: 50,
width: 50,
position: 'absolute',
top: 50,
left: 20,
},
menuIconStyle: {
height: 35,
width: 35,
},
screenTitle: {
position: 'absolute',
top: 50,
color: 'white',
fontSize: 24,
},
buttonContainer: {
position: 'absolute',
top: '9%',
zIndex: 2,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
backgroundColor: 'transparent',
},
///////
container: {
backgroundColor: '#F79D42',
// flex: 1,
height: '100%',
paddingTop: 20,
flexDirection: 'column',
// justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
input: {
width: '100%',
height: '100%',
backgroundColor: 'gray',
textAlign: 'center'
},
search: {
//flexDirection: 'row-reverse',
width: '90%',
// height: 40,
alignItems: 'center',
justifyContent: 'flex-end',
flex: 1,
paddingBottom: 80
}
})
export default enhancer(Alertable(DashboardScreen))
关于reactjs - 如何使用React-Native在移动应用中实现YouTube播放器之类的Mini View,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57605207/