我希望第一张图片上有文字，但第二张图片不能刷

Question

我正在努力实现这一点：我希望第一张图片上有文本，但之后我不希望有。我评论的所有内容都是我最初的做法，但经过了更改，可以为你们查看。请注意这一点，因为这可能会改变我的洞察力。现在我根本没有收到任何文本显示。

此外，如果旋转木马增加了太多的注意力，我可以把它拿出来。

import * as React from 'react';
import {
Text,
View,
StyleSheet,
Image,
ScrollView,
Dimensions,
ImageBackground,
} from 'react-native';
import Constants from 'expo-constants';
const { width } = Dimensions.get('window');
const height = width * 0.6;
const images = [
'https://images.pexels.com/photos/2249602/pexels-photo-2249602.jpeg?cs=srgb&dl=pexels-sergio-souza-2249602.jpg&fm=jpg',
'https://images.pexels.com/photos/3178881/pexels-photo-3178881.jpeg?cs=srgb&dl=pexels-andrew-neel-3178881.jpg&fm=jpg',
'https://images.pexels.com/photos/4946412/pexels-photo-4946412.jpeg?cs=srgb&dl=pexels-maria-orlova-4946412.jpg&fm=jpg',
'https://images.pexels.com/photos/4911060/pexels-photo-4911060.jpeg?cs=srgb&dl=pexels-cottonbro-4911060.jpg&fm=jpg',
];
//this is the array I noramlly use. 
//const images = [
//   {id : "1", uri: require('../../assets/placeholder1.jpg'), text: "Test"},
//   {id : "2", uri: require('../../assets/placeholder2.jpg'), /*text: "Test"*/},
//   {id : "3", uri: require('../../assets/placeholder3.jpg'), /*text: "Test"*/},
//   {id : "4", uri: require('../../assets/placeholder4.jpg'), /*text: "Test"*/},
//   {id : "5", uri: require('../../assets/placeholder5.jpg'), /*text: "Test"*/},
//   {id : "6", uri: require('../../assets/placeholder6.jpg'), /*text: "Test"*/},
//   {id : "7", uri: require('../../assets/placeholder7.jpg'), /*text: "Test"*/},
//   {id : "8", uri: require('../../assets/placeholder8.jpg'), /*text: "Test"*/},
//   {id : "9", uri: require('../../assets/placeholder9.jpg'), /*text: "Test"*/},
//]
export default class App extends React.Component {

state = {
active: 0,
};
change = ({ nativeEvent }) => {
const slide = Math.ceil(
nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width
);
if (slide !== this.state.active) {
this.setState({ active: slide });
}

};
render() {
return (
<View style={{flex: 1}}>
<View style={{ flex: 3, justifyContent: 'center', alignItems: 'center'}}>
<ScrollView
pagingEnabled
horizontal
showsHorizontalScrollIndicator={false}
onScroll={this.change}
style={{ width, height }}>

{
images.map((image, index) => (
<ImageBackground
key={index}
source={{uri: image}}
//Normally, I would not have key and source would be like this
//source={item.uri}
style={{ width, height: '100%', resizeMode: 'cover' }}>
<View style={{position: 'absolute', bottom: 25 }}>      
<Text style = {this.state.active === 0 ? <Text>Placeholder</Text> : null , styles.Name}> </Text>  
<Text style = {this.state.active === 0 ? <Text>Another Placeholder</Text> : null , styles.Name}> </Text>        
</View>
</ImageBackground>
))
}
</ScrollView>
<View style={{flexDirection: 'row', position: 'absolute', bottom: 0, alignSelf: 'center',}}>
{
images.map((i, k) => (
<Text style={k == this.state.active ? styles.activeCorousel : styles.carousel}> 
⬤
</Text>
))}
</View>
</View>
</View>

);
}
}
const styles = StyleSheet.create({
carousel: {
color: '#888',
fontSize: width / 35,
opacity: .5
},
activeCorousel: {
color: '#fff',
fontSize: width / 35,
},
Name: {
fontWeight: 'bold',
color: 'white',
fontSize: 40,
paddingLeft: 20
},      
});

请随意将我的代码复制到snack.expo.io.中

Answer 1

只有当索引等于0时，才使用条件JSX进行渲染。

images.map((image, index) => (
<ImageBackground
key={index}
source={{uri: image}}
style={{ width, height: '100%', resizeMode: 'cover' }}
>
{index === 0 && (
<View style={{position: 'absolute', bottom: 25 }}>      
<Text>Placeholder</Text> 
</View>
)}
</ImageBackground>
))

此外，您的条件样式：

<Text style = {this.state.active === 0 ? <Text>...

毫无意义；style属性不支持JSX，只支持React Native有效的样式道具。