Question

我在另一个名为 Animforpop 的React组件中有一个名为 popup 的组件，这样我就可以在react本机应用程序中创建一个小吃店效果；

编辑个人资料：

class EditProfile extends Component {

   state={alertpositon:100}
   static navigationOptions = {
     title:'Edit profile',
    drawerLabel: 'Edit profile',

  };


  render() {

    alert=()=>{

    }
    return (
      <View style={{flex:1}}>


      <TextInput style={{borderColor:styles.primaryColor,borderWidth:2,width:'70%',alignSelf:'center',top:'7%'}} placeholder='Name'/>
          <TextInput style={{borderColor:styles.primaryColor,borderWidth:2,width:'70%',alignSelf:'center',top:'12%'}} placeholder='Email' keyboardType='email-address'/>

      <TouchableOpacity style={{borderWidth:2,borderColor:styles.secondaryColor,width:'80%',height:'22%',top:'25%',alignItems:'center',justifyContent:'center',alignSelf:'center'}}  onPress={()=>this.setState({alertpositon:80})}>


  <Text style={{color:styles.secondaryColor,fontSize:20}}>Update</Text>


 </TouchableOpacity>
 <Animforpop>
<Popup mode='error' message='details incorrect' title='error' textcolor={styles.secondaryColor}/>
</Animforpop>
      </View>
    );
  }
}
export default EditProfile;

Animforpop.js：

export default class Animforpop extends React.Component{

state={top: new Animated.Value(100)}

pop=()=>{


    Animated.timing(
      this.state.top,
      {
        toValue: 80,
        duration: 90000,
      }
    ).start();


}

componentDidMount(){
this.pop()


}


render=()=>{
  return(

    <Animated.View                 // Special animatable View
      style={{width:'100%',
      height:'20%',
        position:'absolute',
      top:`${parseInt(this.state.top)}%`        // Bind opacity to animated value
      }}
    >
      {this.props.children}
    </Animated.View>
  );
}
}

Popup.js

export default class Popup extends Component{


state={bgcolor:null}



render=()=>{
  console.log('sadas',this.props.mode)
  {if(this.props.mode=='warn'){
    console.log('dofucl'),


    this.state.bgcolor='#F5AC07'

  }
  else if (this.props.mode=='error') {

      this.state.bgcolor='#D83C0A'
  }else if (this.props.mode=='good') {

      this.state.bgcolor='#0EBF07'
  }}
  return(


<View style={{ flexdirection:'row',width:'100%',
backgroundColor:this.state.bgcolor

,
position:'absolute'
,top:'80%'
,height:'20%'
,justifyContent:'center'

}

}>


<View flexdirection='row'>
<Text>{this.props.title}</Text>
<Text style={{alignSelf:'center',color:this.props.textcolor}}>{this.props.message}</Text>
</View>
</View>

);


}
}

我想在react native中创建像小吃店一样的效果，所以我设计了代码，例如，如果运行该应用程序，则红色条很奇怪，它位于屏幕的中心，没有动画，我不知道我在哪里出错，但是请编辑我的代码并建议我阅读所有文档，因为我可以成为

的专家

无法为子组件制作动画

0 个答案: